jQuery jquery垂直鼠标滚轮平滑滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14905779/
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
jquery vertical mousewheel smooth scrolling
提问by gigi melcul
I'm making a parallax website and I would like to make the page scroll smoother with the mousewheel for a better user experience. The best example I could get was this website: http://www.milwaukeepolicenews.com/#menu=home-pageIt would be great if I could get something similar to that into my website, the smooth vertical scrolling and scroll inertia.
我正在制作一个视差网站，我希望使用鼠标滚轮使页面滚动更流畅，以获得更好的用户体验。我能得到的最好的例子是这个网站：http: //www.milwaukeepolicenews.com/#menu=home-page如果我能在我的网站中加入类似的东西，平滑的垂直滚动和滚动惯性，那就太好了。
I noticed they are using Brandon Aaron's jQuery mousewheel which is very light but I'm just a beginner and cannot make it work by myself.
我注意到他们正在使用 Brandon Aaron 的 jQuery 鼠标滚轮，它非常轻巧，但我只是一个初学者，不能自己动手。
Also i noticed this in their mpd-parallax.js:
我也在他们的 mpd-parallax.js 中注意到了这一点：
jQuery(window).mousewheel(function(event, delta, deltaX, deltaY){
if(delta < 0) page.scrollTop(page.scrollTop() + 65);
else if(delta > 0) page.scrollTop(page.scrollTop() - 65);
return false;
})
Thank you!
谢谢！
EDIT
编辑
I'm almost there. Take a look at this fiddle: http://jsfiddle.net/gmelcul/cZuym/It only needs adding an easing method to scroll just like the Milwaukee Police website.
我快到了。看看这个小提琴：http: //jsfiddle.net/gmelcul/cZuym/它只需要添加一个缓动方法来滚动，就像密尔沃基警察网站一样。
回答by user5863872
I know it's a really old post, but here is a good solution I made :
我知道这是一个非常老的帖子，但这是我提出的一个很好的解决方案：
function handle(delta) {
var animationInterval = 20; //lower is faster
var scrollSpeed = 20; //lower is faster
if (end == null) {
end = $(window).scrollTop();
}
end -= 20 * delta;
goUp = delta > 0;
if (interval == null) {
interval = setInterval(function () {
var scrollTop = $(window).scrollTop();
var step = Math.round((end - scrollTop) / scrollSpeed);
if (scrollTop <= 0 ||
scrollTop >= $(window).prop("scrollHeight") - $(window).height() ||
goUp && step > -1 ||
!goUp && step < 1 ) {
clearInterval(interval);
interval = null;
end = null;
}
$(window).scrollTop(scrollTop + step );
}, animationInterval);
}
}
Test it : http://jsfiddle.net/y4swj2ts/3/
回答by Cymen
Here are two jsfiddles -- one with the script and one without it so you can compare:
这里有两个 jsfiddle——一个有脚本，一个没有脚本，这样你就可以比较：
JavaScript using the jQuery mousewheel plugin:
JavaScript 使用jQuery mousewheel 插件：
$(document).ready(function() {
var page = $('#content'); // set to the main content of the page
$(window).mousewheel(function(event, delta, deltaX, deltaY){
if (delta < 0) page.scrollTop(page.scrollTop() + 65);
else if (delta > 0) page.scrollTop(page.scrollTop() - 65);
return false;
})
});
Compare the two. From what I can tell, the script slows the mouse wheel so it requires more physically turning to scroll the same distance as without the script. It may feel smoother because of that slower scrolling (and it may indeed be smoother as it is probably easier on the graphics unit).
比较两者。据我所知，脚本会减慢鼠标滚轮的速度，因此需要更多的物理转动才能滚动与没有脚本相同的距离。由于滚动速度较慢，它可能会感觉更平滑（并且它确实可能更平滑，因为它在图形单元上可能更容易）。
回答by atomicrabbit
回答by GBM
hey I got another ressource here which is really simple to use smoothwheel
嘿，我这里有另一个资源，使用smoothwheel非常简单
It enable a smooth scroll animation on mousewheel on every devices and work perfectly !
它可以在每个设备上的鼠标滚轮上实现平滑的滚动动画，并且完美运行！
回答by iacobalin
I found this plugin, it has some nice options and works on all major devices http://areaaperta.com/nicescroll/
我找到了这个插件，它有一些不错的选择，适用于所有主要设备http://areaaperta.com/nicescroll/
