jQuery 使用鼠标滚轮平滑滚动缓动效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9142490/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Smooth scrolling easing effect with mouse wheel
提问by idbranding
I recently came across this website http://www.ascensionlatorre.com/home, and I love the way the mouse wheel scrolling works - the easing is very smooth.
我最近访问了这个网站http://www.ascensionlatorre.com/home，我喜欢鼠标滚轮滚动的方式 - 缓动非常流畅。
I have been searching Google but I can't find anything similar.
我一直在搜索谷歌，但我找不到任何类似的东西。
Does anybody have any suggestions on how to replicate this effect with jQuery?
有人对如何用 jQuery 复制这种效果有任何建议吗？
回答by Dylan
I recently came across this issue as well and I wasn't finding a lot of support for it, so I quickly forgot about the problem. A few months later I saw a better example of the smooth scrolling so I went in and dug around the JavaScript files they were using and I found that they were using a jQuery file called NiceScroll.
我最近也遇到了这个问题，但我没有找到很多支持，所以我很快就忘记了这个问题。几个月后，我看到了一个更好的平滑滚动示例，因此我深入研究了他们使用的 JavaScript 文件，我发现他们使用了一个名为 NiceScroll 的 jQuery 文件。
I believe this is what we've both been looking for- simple smooth scrolling for divs, iframes or whatever, much like the iOS scrolling.
我相信这就是我们一直在寻找的东西——简单的 div、iframe 或其他任何东西的平滑滚动，就像 iOS 滚动一样。
回答by hellojebus
http://areaaperta.com/nicescroll/
http://areaaperta.com/nicescroll/
that's definitely the script to check out. Although it adds a custom scroll bar, it's a good looking one that you can edit through css.
这绝对是要检查的脚本。虽然它添加了一个自定义滚动条，但它是一个很好看的滚动条，您可以通过 css 进行编辑。
EDITI had a working demo but have since removed it due to hosting and domain changes, sorry about that.
编辑我有一个工作演示，但由于托管和域更改而将其删除，对此感到抱歉。
回答by Panshul
Okay mate, i'll try helping on ur request with some material. I found this tutorial for myself, hope it will be useful for u too. This forms the basic of the site you are referring to: http://johnpolacek.github.com/scrollorama/
好的，伙计，我会试着用一些材料帮助你的要求。我为自己找到了这个教程，希望它对你也有用。这构成了您所指网站的基本内容：http: //johnpolacek.github.com/scrollorama/
回答by Winters
I have the same question you've asked. I visit the website you provided and I find out the answer!
我有你问过的同样问题。我访问了你提供的网站，我找到了答案！
They used jquery.mousewheel.js, and you can use Chrome's console to find the script. Just search 'mousewheel' and you can find a function called 'scroll'. The reason of the smooth scrolling is that they didn't use jquery's animate, but using javascript's setInternal to make it. You can learn from the code.
他们使用 jquery.mousewheel.js，您可以使用 Chrome 的控制台来查找脚本。只需搜索“鼠标滚轮”，您就可以找到一个名为“滚动”的功能。平滑滚动的原因是他们没有使用 jquery 的 animate，而是使用 javascript 的 setInternal 来制作它。你可以从代码中学习。
I believe you can make it.
我相信你能做到。
回答by eighteyes
I haven't dived into the code, but I suspect they're using CSS3 transitions.
我没有深入研究代码，但我怀疑他们正在使用 CSS3 转换。
transition: all 1s
On your element (vendor prefixed of course), will smooth out the animations from parallax effects.
在您的元素（当然是供应商前缀）上，将从视差效果中平滑动画。
It seems like they've overridden the scrollWheel behavior and made each tick go down the page by a determined amount. That's how I would approach this at least.
似乎他们已经覆盖了 scrollWheel 行为，并使每个勾号在页面上向下移动确定的数量。至少我会这样处理。
