jquery垂直mousewheel平滑滚动

前端之家收集整理的这篇文章主要介绍了jquery垂直mousewheel平滑滚动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在做一个视差网站,我想让页面滚动更平滑与鼠标为更好的用户体验。
我可以得到的最好的例子是这个网站: http://www.milwaukeepolicenews.com/#menu=home-page
这将是巨大的,如果我可以得到类似的东西到我的网站,平滑的垂直滚动和滚动惯性。

我注意到他们使用Brandon Aaron的jQuery mousewheel这是很轻,但我只是一个初学者,不能让它自己工作。

我也注意到这在他们的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;
    })

谢谢!

编辑

我快到了。看看这个小提琴:http://jsfiddle.net/gmelcul/cZuym/它只需要添加一个缓和方法滚动就像密尔沃基警察网站。

解决方法

这里有两个jsfiddles – 一个与脚本,一个没有它,所以你可以比较:

> with script
> without script

JavaScript使用jQuery mousewheel plugin

$(document).ready(function() {
    var page = $('#content');  // set to the main content of the page   
    $(window).mousewheel(function(event,deltaY){
        if (delta < 0) page.scrollTop(page.scrollTop() + 65);
        else if (delta > 0) page.scrollTop(page.scrollTop() - 65);
        return false;
    })
});

比较两者。从我可以告诉,脚本减慢鼠标滚轮,所以它需要更多的物理转向滚动相同的距离,没有脚本。它可能会感觉更平滑,因为较慢的滚动(它可能确实更平滑,因为它可能更容易在图形单元)。

原文链接:https://www.f2er.com/jquery/183650.html

猜你在找的jQuery相关文章