确定用户滚动与JavaScript scrollTop更改的区别

Question

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

我有一个可滚动的区域，就像一个CV控制旋钮，用户可以滚动并直接映射到DOM元素的大小、左侧和顶部。

如果滚动事件结束在特定的范围内，我想要“捕捉”到附近的位置，并使用粒度渐变来修改相同可滚动区域的scrollTop。

在这个过程中，我希望任何用户滚动都可以立即覆盖动画，以便用户重新获得控制。

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

- neaumusic

---

如果您正在使用框架（特别是jQuery），则可以将参数传递给.trigger()调用。这个调用将存在于代码生成的调用中，但在事件调用中不存在。 - Jhecht

Answer 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>

- shubham agrawal

Answer 2

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

如果浏览器轮询scrollTop并发出滚动事件，则需要将该scrollTop与您打算添加的内容进行比较，或者与scrollTop应该是什么进行比较。您还可以尝试侦听“wheel”而不是滚动。

---

对我来说最大的问题是scrollTop不能有浮点数，将scrollTop设置为150.999与设置150相同，因此我建议先使用Math.round()进行四舍五入，并检查滚动Math.abs(event.target.scrollTop - myScrollTop) < 1或类似比较，因为myScrollTop仍然是正确的浮点数（非整数）。

---

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

目前，如果我使用CMD +或CMD-，我的滚动行为会出现问题，但我很快就会处理这个问题。

- neaumusic