我正在尝试构建一个由div组成的网站,这些div的行为有点像页面。因此,有多个div叠放在彼此之上,高度最小为浏览器窗口的100%。我正在尝试使导航生效,以便用户可以使用鼠标滚轮滚动到下一个div。我发现了这个有用的代码片段:
http://jsfiddle.net/Mottie/Vk7gB/
但是您可以看到,当内容超过浏览器窗口时会出现问题。我希望它能够正常工作,如果当前div比浏览器窗口长,滚动应该正常工作,但它应该在div底部停止,然后下一次滚动到下一个div的最前面。有没有办法实现这个功能?我希望这有点意义... 谢谢,- Mikkå
$('#nav').onePageNav();
var $current, flag = false;
$('body').mousewheel(function(event, delta) {
if (flag) { return false; }
$current = $('div.current');
if (delta > 0) {
$prev = $current.prev();
if ($prev.length) {
flag = true;
$('body').scrollTo($prev, 1000, {
onAfter : function(){
flag = false;
}
});
$current.removeClass('current');
$prev.addClass('current');
}
} else {
$next = $current.next();
if ($next.length) {
flag = true;
$('body').scrollTo($next, 1000, {
onAfter : function(){
flag = false;
}
});
$current.removeClass('current');
$next.addClass('current');
}
}
event.preventDefault();
});
但是您可以看到,当内容超过浏览器窗口时会出现问题。我希望它能够正常工作,如果当前div比浏览器窗口长,滚动应该正常工作,但它应该在div底部停止,然后下一次滚动到下一个div的最前面。有没有办法实现这个功能?我希望这有点意义... 谢谢,- Mikkå