Как переместить прокрутку таблицы к нижней части видимой области?

Question

[xsash]

Потребовалось сверстать для локального проекта одностраничник, но с большой таблицей.

Ломаю голову над переносом (дублированием) горизонтального скрола внутрь блока с таблицей, т.к. по умолчанию он в самом низу оказывается и до него нужно прокручивать



Код пока набросал самый простой
https://jsfiddle.net/rkd2w0xg/

Из особенностей - колонки можно скрывать на лету, т.е. "дополнительный" скролл должен перещитываться.
Может есть какое-то готовое решение на JS?

Comments

[Kentavr16]

я бы добавил какие-то плавающие кнопки для "перемотки" таблицы. Ведь если так думать, то и второй скролл не поможет в UX если допустим таблица по высоте будет занимать больше чем экран.(ps - понял вопрос, комментарий не по теме)
Хотя нет, я бы вообще ничего не делал - разве что добавил бы подсказку кликнуть колесико мыши и таскать таблицу как душе угодно )

[Kentavr16]

Самый просто вариант - разместить таблицу во внутреннем контейнере высотой в условные пол экрана. Тогда пользователь всегда сможет скролить до нужного места таблицы, не теряя из виду нативные скроллбары.

Answer 1

[shsv382]

Попробуй ограничить высоту таблицы и сделать для нее вертикальный скролл (max-height: 90vh; overflow: scroll;). Таким образом в пределах экрана всегда будет виден низ таблицы