在滚动时对齐到 div/元素的顶部答案

【问题标题】：Snap To Top of Div/Element on Scroll在滚动时对齐到 div/元素的顶部
【发布时间】：2013-04-02 20:09:14
【问题描述】：

谁能推荐一种在向下滚动页面时将滚动条捕捉到元素顶部的“最佳”方法？

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

<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 很熟悉，但有点不确定从这里往哪里走。

【问题讨论】：

所以你基本上希望下一个<div> 跳到屏幕顶部，只要它在视口内？它应该在那里停留多长时间（想想用户继续滚动并在片刻之后识别出内容移动到视口顶部）。如果用户的屏幕高于 600px 会发生什么，因为总会有两个 <div>s 可见？

标签： jquery scroll scrolltop

【解决方案1】：

您可以使用@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);
}

DEMO

【讨论】：

是的，因为 isScrolledIntoView 如果 wiewport 中的元素返回 true，我已经更改了函数，现在看起来就像你说的那样工作。
太棒了。我想唯一会导致一些错误的业务是当视口显示多个 div 时，这会导致 JS 多次向存在的不同 div 添加/删除“highlight”类。我可能会尝试找到一种方法来检查一个 div 是否具有大部分窗口空间，或者每个 div 是否具有弹性，具有 100% 的宽度和高度？

【解决方案2】：

你能做的就是设置

body {
overflow:hidden
}

并且可以控制用户交互，假设你有一个菜单，如果用户在菜单中选择一个部分，你只是用 scrollTop 动画来重定向到该部分。

另一种解决方案，因为您定义了 600px 的高度，您可以使用 scrollTop 计算并滚动用户在文档中的位置，如下所示...

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：