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

Question

我最近发现了这个网站http://www.ascensionlatorre.com/home，我喜欢鼠标滚轮滚动的方式——缓动非常平滑。

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

有没有人有关于如何使用jQuery复制这种效果的建议？

- idbranding

---

有很多东西涉及到滚动、菜单导航和不同时间段内的部分出现/消失，所以我认为它过于全面，不能只是一个SO问题。自己试一试并在路上遇到困难时返回提出具体问题吧。 - Christofer Eliasson

为什么会有负评？我提出了一个具体问题，我想知道鼠标滚轮缓动是如何工作的。我来这里是为了学习，而不是为了抄袭。 - idbranding

下投票是因为我认为这个问题过于笼统。使滚动平滑的组件有多种，包括重叠内容随着滚动而滑动、自定义滚动条、平滑过渡等等。描述如何使用jQuery完成所有这些工作对于一个SO问题来说太全面了。 - Christofer Eliasson

好的，我明白了，但是我想知道的唯一一件事情（指引我方向）是鼠标滚轮的缓动效果，而不是你提到的其他所有效果。 - idbranding

可能是重复问题：https://dev59.com/NG035IYBdhLWcg3wNdLg - Anderson Green

非常简单和流畅 https://github.com/simov/simplr-smoothscroll/blob/master/lib/jquery.simplr.smoothscroll.js - m-khonsari

Answer 1

最近我也遇到了这个问题，但我没有找到太多的支持，所以我很快就忘记了这个问题。几个月后，我看到一个更好的平滑滚动的例子，于是我深入研究他们使用的JavaScript文件，发现他们正在使用一个名为NiceScroll的jQuery文件。

我相信这正是我们都在寻找的-用于div、iframes或其他内容的简单平滑滚动，就像iOS滚动一样。

http://areaaperta.com/nicescroll/

- Dylan

---

只有10行代码，为什么要包含数百行代码呢？这里是代码链接：http://jsfiddle.net/7ZVb7/1383/ - Kamran Asgari

@CameronA - 你的 jsfiddle 示例目前只能向下滚动而不能向上滚动。此外，我相信有更好的 js 文件可以处理漂亮的滚动效果，并且代码行数更少，但是这篇文章已经一年了。 - Dylan

那个链接被别人修改了，出现了问题，这是正确的链接 ;) http://jsfiddle.net/7ZVb7/1383/ - Kamran Asgari

我再次检查了一下，我的链接正常工作，可轻松上下滚动并拥有 Android 效果。 - Kamran Asgari

@CameronA 你好！我又来了。一直困扰着我为什么在我的设备上无法正常工作，并且我想详细说明一下遇到的问题。经过一些测试，发现当mWheels增加2个及以上（我的设置为3）时，在动画滚动中会出现错误，并且如果滚动方向改变，则会继续以当前方向滚动。例如：如果向下滚动，然后在动画运行时更改为向上滚动，它将继续向下滚动。 - Dylan

Answer 2

http://areaaperta.com/nicescroll/

这绝对是值得一试的脚本。虽然它添加了自定义滚动条，但它是一个外观不错的滚动条，可以通过css进行编辑。

编辑 我之前有一个可用的演示，但由于主机和域名更改已将其删除，对此感到抱歉。

- hellojebus

---

链接无法使用，“建立数据库连接错误”。 - Naren Verma

Answer 3

我和你提出了相同的问题，我访问了您提供的网站并找到了答案！

他们使用了jquery.mousewheel.js，并且您可以使用Chrome控制台 查找脚本。只需搜索“mousewheel”，您就可以找到名为“scroll”的函数 。平滑滚动的原因是它们没有使用jQuery的动画，而是使用javascript的setInternal使其实现。您可以从代码中学习。

我相信你可以做到。

- Winters

Answer 4

好的，朋友，我会尽力帮助您翻译相关材料。我找到了这篇教程，希望对您也有用。这是您所提到的网站的基础：

http://johnpolacek.github.com/scrollorama/

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

- Panshul

---

首先，感谢您的回复。我已经找到了这个网站，对div的动画并不是问题。我喜欢的是使用鼠标滚轮的缓动效果。您有什么建议吗？ - idbranding

是的，我也知道那个例子，它不支持鼠标滚轮缓动。 - idbranding

想知道你是否成功找到了解决方案？我也在寻找类似的东西，但在谷歌上找不到解决方案。 - DBUK

http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html - 这个最接近。 - idbranding

请检查我的JSFiddle，只有10行代码，并且带有移动端效果 :) http://jsfiddle.net/7ZVb7/1383/ - Kamran Asgari

Answer 5

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

transition: all 1s

在您的元素上（当然是厂商前缀），将使视差效果的动画更加平滑。

似乎他们已经覆盖了scrollWheel行为，并使每个刻度按确定的数量向下滚动页面。至少这是我会采取的方法。

- eighteyes