滚动时固定 div

Question

在我的页面上，我有一个 div 100% 宽度，其中包含 2 个 div，每个 50% 宽度，其中一个的高度比主 div 大，但溢出设置为滚动。 所以我需要的是，当我滚动页面时，当我到达包含 2 个 div 的 div 时，页面滚动停止，并且只滚动带有溢出集滚动的 div，在我完成滚动该 div 后，我的页面可以启动再次滚动..

Answer 1

只是一个片段来展示它是如何“可以”完成的。 我自己不会使用它，因为侦听每个滚动事件在性能上可能会非常昂贵。

var div = document.querySelector('yourDivReference'),
    focussed = false;
window.addEventListener('scroll', function ( event ) {
    if (!focussed && window.pageYOffset >= (div.offsetTop - 2)) {
        div.focus();
        focussed = true;
    }
});

在 IE 上测试。 在其他浏览器中，您可能必须使用与 offsetTop 和 pageYOffset 不同的属性。 这个想法是你计算窗口滚动了多少。 到达可滚动的 div 位置后，将焦点放在 div 上，以便 div 滚动。 您可以自己添加相反的内容，在那里检查 div 滚动的结尾，这样您就可以将焦点切换回 false，将焦点重新放在主体上，然后继续在那里滚动。 不要忘记在您想要关注的任何元素上放置标签索引。 如果浮动元素没有给出准确的位置，您可能需要将浮动元素包装到另一个非浮动容器中。