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

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添加到.greyed类中>

Answer 2