How do I make the scrollbar sticky?

[axelthat]

My table is scrollable horizontally if content is too big. The problem with this is I have to scroll all the way to the bottom to use the scrollbar. Ofc, I could use Shift + ScrollWheel to horizontally scroll but most of my user base don't even know that this key combination even exist.

Is it possible to make the scrollbar sticky? I tried the following css on the scrollbar but it don't seem to work:

position: sticky;
top: 0;

Here's a reproducible example: https://stackblitz.com/edit/vitejs-vite-k4wqf4?file=src%2Fmain.ts

Thank you!

[KingSora]

Good day @axelthat :)

If your whole document consists of only the table you can make the scrollbar fixed: https://stackblitz.com/edit/vitejs-vite-cttbhv?file=src%2Fstyle.css,src%2Fmain.ts

If your table is embedded somewhere else on your page you have to come up with your own markup to make this possible.. Its certainly possible and has been done. One example would be on the v1 docs page: https://kingsora.github.io/OverlayScrollbars/v1/#!faq where you can find a table if you scroll down. The source code of the v1 docs can be found here: https://github.com/KingSora/OverlayScrollbars/tree/master/docs/v1

[axelthat]

@KingSora Good day to you too.

Unfortunately that doesn't help my case because my table don't have a fixed height. And frankly, I don't want to – as my page would have too many scrollbar clutter. I want the table to just use the default body scrollbar.

Do you think it's possible to somehow make the virtual scroll bar sticky using position: sticky?

Thank you!

[KingSora]

@axelthat Maybe this example is more what you would expect: https://stackblitz.com/edit/vitejs-vite-mgh3cg?file=src%2Fstyle.css,src%2Fmain.ts

I've moved the scrollbars to the parent element of the #table element because the parent is responsible for the vertical scrolling. This markup makes the position: sticky style possible.

[KingSora]

@axelthat does the last example solve your issue?

[axelthat]

Hi @KingSora. That works perfectly for my use case. Thank you for your efforts.