jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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;
    })
});

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

大佬总结

以上是大佬教程为你收集整理的jquery垂直mousewheel平滑滚动全部内容,希望文章能够帮你解决jquery垂直mousewheel平滑滚动所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: