Как отсоединить горизонтальную полосу прокрутки от элемента div и перевести ее в другое горизонтальное положение - корпус реагирующей таблицы? - PullRequest
Новая
       17

Как отсоединить горизонтальную полосу прокрутки от элемента div и перевести ее в другое горизонтальное положение - корпус реагирующей таблицы?

0 голосов
/ 31 мая 2019

У меня есть response-tabel, и я пытаюсь вставить на страницу так, чтобы строка заголовка находилась в фиксированном вертикальном положении, содержимое таблицы реакции контролировалось вертикальной прокруткой браузера, но горизонтальной позицией контролируется горизонтальной прокруткой таблицы реакций, см. код: https://codesandbox.io/s/reacttable-simple-table-euzqs

Фиксированная строка заголовка достигается кодом из Реагировать на таблицу со статическим заголовком при прокрутке браузера 

.ReactTable {
  margin-top: 74px;
}

.ReactTable .rt-tbody {
  margin-top: 30px;
}

.ReactTable .rt-thead {
  background-color: white;
  position: fixed;
  top: 1;
  z-index: 1;
  width: calc(100% - 17px);
  height: 31px;
}

Но горизонтальная прокрутка достигается атрибутом style / width: 

<ReactTable
          data={data}
          style={{ width: "50%" }}
</ReactTable>

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

1 Ответ

1 голос
/ 24 июня 2019

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

https://uxdesign.cc/position-stuck-96c9f55d9526.

При этом используется position: sticky с верхним смещением, а затем синхронизируется горизонтальная прокрутка между таблицей и закрепленным заголовком.

После того, как вы закончите с этим, у вас должно быть ноу-хау для использования position: sticky с нижнимсмещение для пользовательского элемента большого пальца полосы прокрутки, который всегда будет придерживаться нижнего края таблицы, как и заголовок.И снова, вы можете синхронизировать свою собственную позицию / движение с горизонтальной позицией прокрутки стола.

...