使用鼠标滚轮平滑滚动缓动效果

Question

我最近遇到过这个网站http://www.ascensionlatorre.com/home，我喜欢鼠标滚轮滚动的方式 - 宽松非常顺畅。

我一直在搜索谷歌但我找不到类似的东西。

有人对如何使用jQuery复制此效果有任何建议吗？

Answer 1

我最近也遇到过这个问题而且我没有找到很多支持，所以我很快忘记了这个问题。几个月后，我看到了一个更好的平滑滚动示例，所以我进入并挖掘了他们使用的JavaScript文件，我发现他们使用的是名为NiceScroll的jQuery文件。

我相信这就是我们一直在寻找的 - 简单的div，iframe或其他任何内容的平滑滚动，就像iOS滚动一样。

http://areaaperta.com/nicescroll/

Answer 2

http://areaaperta.com/nicescroll/

这绝对是要检查的脚本。虽然它添加了一个自定义滚动条，但它是一个很好看的，你可以通过CSS编辑。

修改 我有一个工作演示，但由于托管和域名更改已删除它，抱歉。

Answer 3

好的伙计，我会尝试用一些材料来帮助你。我为自己找到了这个教程，希望它对你也有用。这构成了您所指的网站的基本内容： http://johnpolacek.github.com/scrollorama/

http://johnpolacek.github.com/scrolldeck.js/

Answer 4

我有同样的问题你问过。我访问了您提供的网站，我找到了答案！

  

他们使用了jquery.mousewheel.js，你可以使用Chrome的控制台   找到脚本。只需搜索“鼠标滚轮”即可找到一个功能   叫'滚动'。平滑滚动的原因是它们   没有使用jquery的动画，而是使用javascript的setInternal来   做了。您可以从代码中学习。

我相信你可以成功。

Answer 5

我没有深入研究代码，但我怀疑他们正在使用CSS3过渡。

transition: all 1s

在你的元素（当然是供应商前缀）上，将平滑视差效果的动画。

看起来他们已经覆盖了scrollWheel的行为，并使每个刻度按照确定的数量向下移动。这就是我至少会这样做的方式。