确定用户滚动与 JavaScript 滚动顶部的变化答案

【问题标题】：Determine user scroll vs JavaScript scrollTop change确定用户滚动与 JavaScript 滚动顶部的变化
【发布时间】：2017-04-28 06:17:40
【问题描述】：

如何确定滚动事件是由我自己的动画引起的，还是由用户的滚动引起的？

我有一个可滚动区域，其作用类似于 CV 控制旋钮，用户可以在其中滚动并直接映射到 DOM 元素的大小、左侧和顶部

如果滚动事件在特定范围内结束，我想“捕捉”到附近的位置，并使用修改相同可滚动区域的滚动顶部的精细补间。

当这个过渡发生时，我希望任何用户滚动立即覆盖动画，以便用户重新获得控制

我觉得我非常接近解决方案，并且我注意到我的用例涉及浮点增量，其中用户滚动只会增加完整整数。我不确定这是否有用，并且感觉像是滥用的黑客，但我真的在寻找可以区分用户 scrollTop 更改和我的动画的 scrollTop 更改的任何方式

【问题讨论】：

如果您使用的是框架（尤其是 jQuery），您可以将参数传递给 .trigger() 调用。此调用将出现在代码调用中，但不存在于事件调用中。

标签： javascript

【解决方案1】：

我在我的项目中遇到了一些事情，我需要检测用户是否在滚动，或者是我们的代码在滚动。我使用了一个全局变量myVar，它会根据滚动事件改变它的值。 FIDDLE

这里是代码。

var myVar = false;
$("#button").click(function() {
  myVar = true;
  $('html, body').animate({
    scrollTop: $("#bottom").offset().top
  }, 2000);
});
$(window).bind('mousewheel DOMMouseScroll', function(event) {
  myVar = false;
});
$(document).scroll(function() {
  console.log('Scroll initiated by ' + (myVar == true ? "user" : "browser"));
});

div:hover {
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span> hello there </span>
<br/>
<div id="button"> click here to go down </div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="bottom"> just sitting </div>

【讨论】：

【解决方案2】：

答案是跟踪添加的增量滚动距离以及 scrollTop 应该是什么。

如果浏览器轮询 scrollTop 并发出一个滚动事件，您需要将该 scrollTop 与您的预期添加进行比较，或者任何 scrollTop 应该是。你也可以追求听“轮”而不是滚动

对我来说最大的问题是scrollTop不能有浮点数，设置scrollTop为150.999和设置150是一样的，所以我推荐Math.round()事先，检查滚动Math.abs(event.target.scrollTop - myScrollTop) < 1或者类似的比较，因为 myScrollTop 仍然是正确的浮点数（非整数）

另外值得一提的是，缩放和更改 CSS 参考像素 (window.devicePixelRatio) 似乎会影响 scrollTop 摄取或发射

现在，如果我使用 CMD+ 或 CMD-，我的滚动行为会中断，但我会尽快处理这个问题

【讨论】：