我在做一个视差网站,我想让页面滚动更平滑与鼠标为更好的用户体验。
我可以得到的最好的例子是这个网站: http://www.milwaukeepolicenews.com/#menu=home-page
这将是巨大的,如果我可以得到类似的东西到我的网站,平滑的垂直滚动和滚动惯性。
我可以得到的最好的例子是这个网站: 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 – 一个与脚本,一个没有它,所以你可以比较:
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; }) });
比较两者。从我可以告诉,脚本减慢鼠标滚轮,所以它需要更多的物理转向滚动相同的距离,没有脚本。它可能会感觉更平滑,因为较慢的滚动(它可能确实更平滑,因为它可能更容易在图形单元)。