Question

我正在尝试从div中构建类似页面的网站。因此，有多个div，最小高度为100％的浏览器窗口。我正在尝试使导航工作，以便用户可以使用鼠标滚轮滚动到下一个div。我找到了这段有用的代码：

$('#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å

Answer 1

http://jsfiddle.net/Vk7gB/261/

不是一个完成的解决方案，但它会让你走上正确的道路。

$('#nav').onePageNav();

var $current, flag = false, b = $('body');

b.mousewheel(function(event, delta) {
if (flag) { return false; }
$current = $('div.current');

var $next;
if (delta > 0) $next = $current.prev();
else $next = $current.next();

var scrollTop = b.scrollTop();
var elHeight = $current.height();
var nextOffset = $next.offset().top;
var avHeight = screen.availHeight;

console.log(scrollTop, nextOffset, elHeight, avHeight);
if(scrollTop + elHeight - avHeight < nextOffset){
    return true;
}

if ($next.length) {
    flag = true;
    $next.scrollTop();        
    $('body').scrollTo($next, 1000, {
        onAfter : function(){
            flag = false;
        }
    });
    $current.removeClass('current');
    $next.addClass('current');
}

event.preventDefault();
return false;
});

Answer 2

在这个article中你可以找到类似的解决方案，我更愿意使用它而不是你的想法

你可以定义部分，如果可能的话，我建议你使你的网页适合浏览器

this是你可以使用它的github js库

this是一个清晰透明的在线演示

JQuery：在到达当前div的末尾后用鼠标滚轮滚动下一个div

2 个答案: