4

任何人都可以推荐一种“最佳”方法来在向下滚动页面时将滚动条捕捉到元素的顶部吗？

例如，如果我的布局如下：

<div id="section-one" style="width: 100%; height: 600px;">
    Section One
</div>

<div id="section-two" style="width: 100%; height: 600px;">
    Section Two
</div>

<div id="section-three" style="width: 100%; height: 600px;">
    Section Three
</div>

<div id="section-four" style="width: 100%; height: 600px;">
    Section Four
</div>

如果用户正在查看第一部分并开始向下浏览，第二部分开始占据浏览器视口的一部分，我希望浏览器自动捕捉到下一个 div 的顶部。

我熟悉 .scroll() 和 .scrollTop 但有点不确定从这里去哪里。

4

3 回答 3

8

您可以使用@Scott Dowding创建的isScrolledIntoView函数检查元素是否在 wiewport 中，

这是一个例子，

$(document).scroll(function() {
    $("div:not(.highlight)").each(function() {
        if (isScrolledIntoView(this)) {
           $("div").removeClass("highlight");
           $(this).addClass("highlight");
           $("body").animate({ scrollTop: $(this).offset().top }, 1000)
        }
    });
});

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return (elemTop <= docViewBottom) && (elemTop > docViewTop);
}​

演示

于 2012-07-26T23:57:35.973 回答
0

你可以做的是设置

body {
overflow:hidden
}

并控制用户交互，假设您有一个菜单，如果用户选择菜单中的一个部分，您只需使用 scrollTop 动画以重定向到该部分。

另一种解决方案，因为你有一个定义的高度是 600px，你可以用 scrollTop 计算并滚动用户在文档中的位置，就像这样......

$(window).scroll(function () { 
      console.log($(window).scrollTop());
});​

示例：http: //jsfiddle.net/3STQN/

于 2012-07-27T00:00:19.090 回答
0

如果多个 div 可以进入视图，那么您可以将函数 isScrolledIntoView 更改为，比如 isTopInTheView 或类似的东西。在该函数中，您可以检查 div 的顶部是否可见，如果是，则将该 div 捕捉到屏幕顶部。

编辑：当然，一旦你找到满足要求的第一个 div，只需从函数返回，这样它就不能再检查任何 div。

于 2013-04-02T12:09:14.613 回答