滾動時固定 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，將焦點重新放在主體上，然后繼續在那里滾動。 不要忘記在您想要關注的任何元素上放置標簽索引。 如果浮動元素沒有給出准確的位置，您可能需要將浮動元素包裝到另一個非浮動容器中。