如何保持：在偽元素與父元素水平滾動之后

Question

我試圖保持 :after 偽元素與我創建的標題水平滾動，其中 :after 元素基本上充當標題下方內容的背景顏色。 內容正文和標題都設置為一起滾動。 不幸的是，目前我發現我創建的列沒有隨標題一起滾動，而是固定在頁面上。

根據此處的帖子，我遇到了麻煩，因為 after 元素位於文檔的正常流之外。 有沒有辦法可以保留 :after 滾動標題？

下面提供了我當前解決方案的一個小例子：

 function rightHeaderScroll() { var rightHeader = document.getElementById('rightHead'); var scrollPos = rightHeader.scrollLeft; var rightMain = document.getElementById('rightMain'); rightMain.scrollLeft = scrollPos; } function leftMainScroll() { var leftMain = document.getElementById('leftMain'); var scrollPos = leftMain.scrollTop; var rightMain = document.getElementById('rightMain'); rightMain.scrollTop = scrollPos; } function rightMainScroll() { var rightMain = document.getElementById('rightMain'); var leftScroll = rightMain.scrollLeft; var topScroll = rightMain.scrollTop; var rightHeader = document.getElementById('rightHead'); var leftMain = document.getElementById('leftMain'); leftMain.scrollTop = topScroll; rightHeader.scrollLeft = leftScroll; }

 div { border: 1px solid black; } #screen { display: flex; flex-direction: column; } #header { display: flex; width: 100%; height: 50px; } #main { display: flex; width: 100%; height: 500px; } #leftHead { flex: 2; } #rightHead { overflow-x: auto; flex: 3; display: flex; } #leftMain { overflow-y: auto; flex: 2; display: flex; flex-direction: column; } #rightMain { overflow-x: auto; overflow-y: auto; flex: 3; } .headerFiller { min-width: 200px; } .bodyFiller { min-height: 200px; display: flex; } .greyed { background-color: lightgray; } .greyed:after { height: 500px; content: ''; position: absolute; width: 200px; z-index: -1; background-color: lightgray; }

 <div id="screen"> <div id="header"> <div id="leftHead"></div> <div id="rightHead" onscroll="rightHeaderScroll()"> <div class="headerFiller">Text</div> <div class="headerFiller greyed">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller greyed">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller greyed">Text</div> </div> </div> <div id="main"> <div id="leftMain" onscroll="leftMainScroll()"> <div class="bodyFiller">Text</div> <div class="bodyFiller">Text</div> <div class="bodyFiller">Text</div> <div class="bodyFiller">Text</div> <div class="bodyFiller">Text</div> <div class="bodyFiller">Text</div> </div> <div id="rightMain" onscroll="rightMainScroll()"> <div class="bodyFiller"> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> </div> <div class="bodyFiller"> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> </div> <div class="bodyFiller"> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> </div> <div class="bodyFiller"> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> </div> <div class="bodyFiller"> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> </div> <div class="bodyFiller"> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> <div class="headerFiller">Text</div> </div> </div> </div> </div>

我已經嘗試探索單純強調與背景顏色我想作為中提到的列單元格中的想法這個帖子，但我需要規模的性能變得一個重大問題。

謝謝大家！

Answer 1

因為.greyed的位置不是相對的，它的偽類::after對窗口元素或任何相對定位的祖先來說是絕對的。

要解決此問題，請添加position: relative to the .greyed類

Answer 2

所以我似乎面臨的問題是定位：相對於父級，然后發現灰色條將從內容部分完全消失。 我相信這與它們位於單獨的可滾動組件中的事實有關。

這遠不是一個理想的解決方案，但我解決這個問題的方法是在內容頂部創建一個高度為 0px 的項目，並從那里應用afters。 這意味着我將實現解決方案所需的元素數量增加了一倍，但它滿足了我的要求，並且似乎沒有任何顯着的性能損失。

我不喜歡這個答案，並且有太多關於它為什么不起作用的假設。 如果有人還有什么想補充的，我很樂意聽到。 否則，這項工作將有望幫助其他任何遇到類似情況的人。