Всегда показывать полосу прокрутки высоты в области просмотра родительского div

Я использую React-Table как компонент таблицы. Там мне в основном представлен следующий сценарий: https://codesandbox.io/s/52lvxrj8r4

Вертикальная полоса прокрутки тела делает свое дело, однако она находится за пределами области просмотра родительского div, которая выполняет горизонтальную прокрутку. Это означает, что вы видите вертикальную полосу прокрутки только тогда, когда полностью прокручиваете горизонтальную полосу прокрутки вправо.

Мой html:

<div class="rt-table">
   <div class="rt-tbody">
      test
      <br />
      test
      <br />
      (repeat test<br /> many times)
   </div>
</div>

Мой SASS:

.rt-table {
  width: 600px;
  height: 600px;
  overflow-y: hidden;
  .rt-tbody {
    height: 1000px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: scroll;
  }
}

Есть ли возможность убедиться, что вертикальная полоса прокрутки всегда отображается в области просмотра ее родителя, независимо от положения горизонтальной полосы прокрутки?


css scrollbar sass react-table viewport
person Guido Visser    schedule 01.05.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Измените свой sass, чтобы поставить прокрутку на родителя, а не на ребенка.

При создании прокручиваемого контейнера всегда убедитесь, что меньший внешний контейнер содержит полосы прокрутки, иначе ваши полосы прокрутки могут быть скрыты.

.rt-table {
  width: 600px;
  height: 600px;
  overflow-y: scroll;
  .rt-tbody {
    height: auto;
    width: 1000px;   
  }
}
person Tom    schedule 01.05.2019
comment
Спасибо за предложение, но это не исправит ситуацию, потому что .rt-table не должно прокручиваться вертикально, потому что заголовки таблицы липкие. Это проблема. Полоса прокрутки дочернего элемента всегда должна быть видна в родительском окне просмотра. - person Guido Visser; 01.05.2019