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，将焦点放回到身体上，然后继续滚动到那里。不要忘记在要关注的任何元素上放置制表符索引。如果浮动元素没有给出准确的位置，则可能必须将浮动元素包装到另一个非浮动容器中。

滚动时固定div

1 个答案: