这适用于Chrome,IE,Firefox,Opera和Safari:
(function() {
var delay = false;
$(document).on('mousewheel DOMMouseScroll', function(event) {
event.preventDefault();
if(delay) return;
delay = true;
setTimeout(function(){delay = false},200)
var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;
var a= document.getElementsByTagName('a');
if(wd < 0) {
for(var i = 0 ; i < a.length ; i++) {
var t = a[i].getClientRects()[0].top;
if(t >= 40) break;
}
}
else {
for(var i = a.length-1 ; i >= 0 ; i--) {
var t = a[i].getClientRects()[0].top;
if(t < -20) break;
}
}
if(i >= 0 && i < a.length) {
$('html,body').animate({
scrollTop: a[i].offsetTop
});
}
});
})();
这个怎么运作
要在大多数浏览器中监视鼠标滚轮,请使用$(document).on(‘mousewheel’). Firefox是奇怪的,它需要$(document).on(‘DOMMouseScroll’).
要获取鼠标滚轮的方向(向上或向下),请使用event.originalEvent.wheelDelta.同样,Firefox是古怪的,你必须使用-event.originalEvent.detail.
如果方向是负数,则向下滚动页面.在这种情况下,循环遍历从第一个开始的每个标记,直到它的第一个getClientRects()顶部是> = 40.(我使用40,以防浏览器在视口顶部添加默认边距.)
如果方向是正数,则向上滚动页面.在这种情况下,循环遍历从最后一个开始的每个标记,直到它的第一个getClientRects()顶部为< -20. (我用-20来确保我们向上移动页面.) 延迟变量可防止鼠标滚轮滚动太快.整个函数包含在一个闭包中,因此延迟仍然是一个私有变量.