用滚轮向上滚动时运行函数

我已经在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

用滚轮向上滚动时运行函数

回答

相关问题