0

I have a large table that goes beyond the height of the viewport. This table is scrollable horizontally, hence the horizontal scrollbar at the bottom of the table. But the scrollbar is not visible unless a users scrolls the whole page down. I need that scrollbar to be visible always.

I tried setting position: sticky to the ::-webkit-scrollbar pseudo-element of the horizontally scrollable element and some value of top: but my browser (Chrome) doesn't seem to see this. Probably, because the position of the horizontally scrollable element itself is not sticky and the browser wants the positions to match: position property prevents from having an effect. Try setting position to something other than that

I also tried setting something like transform: translateY(50px); but it doesn't work as well. The browser just ignores it.

I guess I could create some element using js that would listen to the scroll event of the table and render a custom scrollbar that I would be able to position wherever I want. But it seems to be too much, and I also want scrollbar to be native looking (matching different styles on different platforms)

Is there any workaround, maybe using some fake scrollbar made with ::before that scrolls with other elements?

EDIT: Here's a codesandbox link that shows the problem https://codesandbox.io/s/frosty-hamilton-2pm610?file=/index.html

Andrew Slock
  • 21
  • 3
  • https://stackoverflow.com/questions/43707076/how-does-the-position-sticky-property-work This question has lots of researches on the topic. This https://stackoverflow.com/a/51222156/2395282 has a way to get parents with overflow:hidden – vimuth May 02 '23 at 09:21
  • @vimuth thanks but the problem is not in the position sticky, the problem is that the scrollbar won't change its position to something other than its parent's. And I want only sticky scrollbar not the whole scrollable element – Andrew Slock May 02 '23 at 09:40
  • try adding position: relative to parent – Madan Bhandari May 02 '23 at 09:47
  • @MadanBhandari Doesn't seem to work. I added a link to the codesandbox, check it out – Andrew Slock May 02 '23 at 10:05

0 Answers0