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

我最近遇到这个网站http://www.ascensionlatorre.com/home，我喜欢鼠标滚轮滚动的方式 - 缓动非常平滑。用鼠标滚轮平滑滚动缓动效果

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

有没有人有任何建议如何复制这种效果与jQuery？

2012-02-04 idbranding

有很多东西在进行滚动，根据滚动的菜单导航，在不同时间出现/消失的部分等等，所以我认为这对SO问题来说是非常全面的。试一试你的自我，然后回过头来问一些你遇到困难的具体问题。 – 2012-02-04 16:48:37

为什么大拇指向下？我问了一个具体的问题，我想知道鼠标滚轮缓动是如何工作的。我在这里学习，不要偷 – idbranding 2012-02-04 16:54:51

倒下是因为我认为这个问题过于宽泛。有一系列组件可以使它们的滚动顺畅，并且在您滚动时自定义滚动条，平滑过渡等等时可以滑动分离的重叠内容。描述如何使用jQuery完成所有这些工作是为了解决单个SO问题。 – 2012-02-04 17:04:10

好的队友，我会尝试帮助你的请求与一些材料。我为自己找到了这个教程，希望它对你也有用。这形成你指的是网站的基本： http://johnpolacek.github.com/scrollorama/

2012-02-04 17:14:06 pansp

首先，感谢您的回复。已经发现这个网站，divs的动画不是问题。我喜欢的东西是使用鼠标滚轮的缓动效果。对此有何建议？ – idbranding 2012-02-04 17:20:18

是的，我知道该示例，它不支持_mousewheel easing_ – idbranding 2012-02-04 17:44:07

想知道您是否成功找到解决方案？我也在寻找类似的东西，无法通过Google寻找解决方案。 – DBUK 2012-05-09 12:32:01

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

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

我相信你可以做到。

2012-09-11 13:16:45 Winters

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

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

2012-09-13 18:59:27 Dylan

这只是10行代码，为什么有人要包含数百行代码？这里是 http://jsfiddle.net/7ZVb7/1383/ – 2013-09-07 06:40:33

@CameronA - 你的jsfiddle例子目前只能向下滚动而不是备份。另外，我确信有更好的js文件可以用较少的代码行处理好滚动，但是这篇文章今天已经有一年了。 – Dylan 2013-09-13 15:22:48

这个链接是由某人编辑并得到了问题这是正确的;）http://jsfiddle.net/7ZVb7/1383/ – 2013-09-14 02:48:21

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

编辑我有一个工作演示，但由于托管和域更改已经删除它，对此感到抱歉。

2013-02-02 20:34:47 hellojebus

链接不工作“建立数据库连接时出错” – 2017-11-29 12:02:37

我还没有潜入代码，但我怀疑他们正在使用CSS3转换。

transition: all 1s

在您的元素（当然是供应商的前缀）上，将从视差效果中消除动画效果。

看起来他们似乎已经重写了scrollWheel行为，并且使每个勾号按照确定的量下到页面上。至少我会这样做。

2013-03-26 22:57:14 eighteyes

回答