用滾輪向上滾動時運行函數

我已經在d3 v4中創建了一個工作縮放行爲來檢查節點圖，但我試圖實現通過縮放調用的兩個方法。當用戶用鼠標滾輪向上滾動放大時，我希望調用方法undo()，當用戶使用鼠標滾輪向下滾動縮小時，我希望調用方法coarse()。我正在努力研究如何運行兩種不同的方法，具體取決於用戶是向上還是向下滾動進行縮放。以下是我編寫基本縮放行爲的方式。任何幫助將是偉大的，謝謝！用滾輪向上滾動時運行函數

var zoom = d3.zoom() 
    .scaleExtent([1, 2000]) 
    .on('zoom', zoomFn); 

function zoomFn() { 
    d3.select('#div2').select('svg').select('g') 
    .attr('transform', 'translate(' + d3.event.transform.x + ',' + d3.event.transform.y + ') scale(' + d3.event.transform.k +')') 


} 
d3.select('#div2').select('svg').select('rect').call(zoom)

來源

2017-07-24 Ruhan Prasad

有幾種方法可以執行此操作。對於更事件偵聽器爲基礎的方法我執行以下操作：

var lastKnownPos = window.scrollY(); 
window.addEventListener('scroll', function(e) { 
    if (lastKnownPos > window.scrollY()) { 
     //user is scrolling up, current position < last position 
     undo(); 
    } else if() { 
     //user is scrolling down, current position > last position 
     coarse(); 
    } 
    lastKnownPos = window.scrollY(); 
}

本質上，上面的片段比較從頁（由window.scrollY()給出）的頂部的距離的先前存儲的值，對當前每當用戶滾動時在頁面上的位置。值的差異告訴用戶正在滾動哪個方向的片段。

有兩點要注意：

- 你應該大概在一個代碼塊，當文檔準備好（因此被載入之前，你不更改該文件，它僅觸發包這個片段中，造成問題）。

- 如果用戶不斷滾動，此功能將不斷調用。如果這不是所希望的行爲，並且您只想要調用undo()和coarse()一次，則可以設置一個布爾值，在執行前檢查它。一旦調用其中一個功能，將布爾值設置爲false，並且在定時器（如setTimeout()）經過所需的一段時間後纔再次設置爲真。你可以在這裏閱讀一些定時功能：Javascript: Call a function after specific time period。

或者，如果您不想/不能使用事件偵聽器，則可以使用完全基於計時器的方法。這將有點難以讓人感覺平滑，同時也不會減慢你的代碼。如果你想讓我詳細說明這一點，請這麼說！

來源

2017-07-24 14:46:37

用滾輪向上滾動時運行函數

回答

相關問題