Javascript Jquery动画滚动问题

我正在尝试创建一个函数，每当用户滚动到某个容器div时，web就会平滑地滚动到该div（我不知道我是否清楚，您可以通过查看我的

当用户缓慢滚动或使用箭头键时，它可以正常工作，但如果用户突然滚动，则动画滚动根本不平滑。它有时也会在动画中间向相反的方向跳。

我不确定这是否是动量滚动的原因，还是用户快速旋转滚轮时滚动速度增加的原因。或者我没想到的其他原因

下面是复制错误的最少代码（与中相同）

HTML:

JS:

---

我对这件事做了几次研究，但都没能解决。非常感谢您的帮助。谢谢。

您的代码非常复杂，因此我的修改可能仍然有问题，但may可以帮助您解决问题或提供一些新想法

首先，我向您推荐这个跨浏览器jQuery mousewheel插件：

因此，您的事件侦听器仅为：

$(document).on('mousewheel keydown',function(event){ });

我还使用了来自的

iselementviewport

技巧

为了检查div顶部/底部的视口可见性，我在html中添加了

作为top

和

作为bottom

标记元素，如下所示：

 <div class="autoscroll">
    <div class="as-top"></div>
    <p>Lipsum stuff...</p>
    <div class="as-bottom"></div>
  </div>

口香糖

---

这些都是我写的，希望你能使用它…

你的代码很复杂，所以我的修改可能仍然有问题，但可能会帮助你或提供一些新的想法

首先，我向您推荐这个跨浏览器jQuery mousewheel插件：

因此，您的事件侦听器仅为：

$(document).on('mousewheel keydown',function(event){ });

我还使用了来自的

iselementviewport

技巧

为了检查div顶部/底部的视口可见性，我在html中添加了

作为top

和

作为bottom

标记元素，如下所示：

 <div class="autoscroll">
    <div class="as-top"></div>
    <p>Lipsum stuff...</p>
    <div class="as-bottom"></div>
  </div>

口香糖

---

这就是我的全部，希望你能使用它…

这里有一个不同的方法：

代码完全重写了。它使用超时，并且只使用

滚动

事件，因此即使在触摸设备上也应该工作

允许快速滚动并修复容器填充问题，因为每个容器前只需要一个标记

。不需要鼠标滚轮插件

---

它可以很容易地重构为jQuery插件，可以在多个可滚动元素上重复使用。

这里有一种不同的方法：

代码完全重写了。它使用超时，并且只使用

滚动

事件，因此即使在触摸设备上也应该工作

允许快速滚动并修复容器填充问题，因为每个容器前只需要一个标记

。不需要鼠标滚轮插件

---

它可以很容易地重构成一个jQuery插件，可以在多个可滚动元素上重复使用。

如果用户的滚动速度真的很快，这仍然会导致一些问题，但它比我的要平滑得多。我不得不这样做的问题是，我的

.autoscroll

容器有填充物和/或边距。我必须把这些填充物移到标记元素上。无论如何，这为我指明了正确的方向，而helper函数实际上帮助很大。非常感谢你的时间，我有一些时间，所以做了另一个答案，看看！如果用户的滚动速度真的很快，这仍然会导致一些问题，但它比我的滚动速度要平稳得多。我不得不这样做的问题是，我的

.autoscroll

容器有填充物和/或边距。我必须把这些填充物移到标记元素上。无论如何，这为我指明了正确的方向，而helper函数实际上帮助很大。非常感谢你的时间，我有一些时间，所以做了另一个答案，看看！

$(document).on('mousewheel keydown',function(event){ });

 <div class="autoscroll">
    <div class="as-top"></div>
    <p>Lipsum stuff...</p>
    <div class="as-bottom"></div>
  </div>