4

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

http://jsfiddle.net/Mottie/Vk7gB/

$('#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。有没有办法做到这一点？

我希望这有点道理..

谢谢，

-米卡

4

2 回答 2

0

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;
});
于 2013-12-02T17:53:57.230 回答
0

在本文中，您可以找到类似的解决方案，我更喜欢使用它而不是您的想法

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

这是你可以使用的 github js 库

这是一个对您来说清晰透明的在线演示

于 2016-10-02T09:58:46.537 回答