如何保持：伪元素与父级水平滚动后

Question

我试图保持 :after 伪元素使用我创建的标题水平滚动，其中 :after 元素基本上充当标题下方内容的背景颜色。内容正文和标题都设置为一起滚动。不幸的是，我发现我创建的列没有随着标题滚动并保持在页面上。

基于post here，我遇到了麻烦，因为 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>

我已经尝试过使用this post 中提到的我想要的背景颜色简单地突出显示列中的单元格的想法，但是我需要的规模的性能成为一个主要问题。

谢谢大家！

Answer 1

所以我似乎面临的问题是在父级上设置 position: relative，然后发现灰色条将完全从内容部分消失。我认为这与它们位于单独的可滚动组件中这一事实有关。

这远不是一个理想的解决方案，但我解决这个问题的方法是在内容顶部创建一个高度为 0px 的项目，然后从那里应用后续内容。这意味着我已经将实现解决方案所需的元素数量增加了一倍，但它可以满足我的要求，并且似乎没有任何明显的性能影响。

我不喜欢这个答案，而且对于它为什么不起作用有太多的假设。如果有人有其他想要添加的内容，我很乐意听到。否则，这项工作有望帮助其他遇到类似情况的人。

Answer 2

因为.greyed的位置不是相对的，所以它的伪类::after对于窗口元素或任何相对定位的祖先都是绝对的。

要解决此问题，请将 position: relative 添加到 .greyed 类