Как сохранить: после прокрутки псевдоэлемента горизонтально с родителем - PullRequest
Новая
       6

Как сохранить: после прокрутки псевдоэлемента горизонтально с родителем

0 голосов
/ 05 февраля 2020

Я пытаюсь сохранить: после горизонтальной прокрутки псевдоэлементов с созданным мной заголовком, где элементы: 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>

Я уже пытался исследовать идею простого выделения ячеек в столбцах желаемым цветом фона, как упомянуто в этой записи , но производительность в требуемом масштабе становится серьезной проблемой.

Спасибо всем!

Ответы [ 2 ]

0 голосов
/ 07 февраля 2020

Таким образом, проблема, с которой я, казалось, столкнулся, заключалась в определении позиции: относительно родителя и обнаружении, что серые полосы затем полностью исчезнут из раздела контента. Я считаю, что это как-то связано с тем фактом, что они находятся в отдельных прокручиваемых компонентах.

Это далеко не идеальное решение, но я решил эту проблему, создав элемент с высотой 0px в верхняя часть содержания и сделать после того, как они применимы. Это означает, что я удвоил количество элементов, необходимых для достижения решения, но он выполняет то, что мне нужно, и, похоже, не оказывает заметного влияния на производительность.

Мне не нравится этот ответ, и там слишком много предположений о том, почему это не работает. Если у кого-то есть что-то еще, что он хотел бы добавить, я хотел бы услышать это. В противном случае, этот обходной путь, надеюсь, поможет кому-либо еще испытать нечто подобное.

0 голосов
/ 05 февраля 2020

Поскольку позиция .greyed не является относительной, ее псевдокласс ::after является абсолютным по отношению к элементу окна или любому предку, который относительно позиционирован.

Чтобы исправить это, добавьте position: relative к .greyed класс

...