javascript - 鼠标滚动 - 对齐 div

Question

我目前有一个形式为

的页面

<div id="content">
    <div id="content-page-1">
    <!--content-->
    </div>
    <div id="content-page-2">
    <!--content-->
    </div>
</div>

有什么方法可以让滚动

1. 粘贴/吸附到 div(这些是显示区域的 100% 高度和 100% 宽度)
2. 检测到滚动时自动滚动到下一个 div

用jquery？

Answer 1

如果你在你的节点上监听滚动事件，你可以很容易地使用像scrollTo这样的插件。平滑滚动到“下一个 div”或上一个 div(无论您如何定义)。

var prevScrollTop = 0;
var $scrollDiv    = $('div#content');
var $currentDiv   = $scrollDiv.children('div:first-child');
$scrollDiv.scroll(function(eventObj)
{
    var curScrollTop = $scrollDiv.scrollTop();
    if (prevScrollTop < curScrollTop)
    {
    // Scrolling down:
        $currentDiv = $currentDiv.next().scrollTo();
    }
    else if (prevScrollTop > curScrollTop)
    {
    // Scrolling up:
        $currentDiv = $currentDiv.prev().scrollTo(); 
    }
    prevScrollTop = curScrollTop;
});