adoxography / tailwind-scrollbar

Scrollbar plugin for Tailwind CSS
MIT License
951 stars 39 forks source link

Scrollbar Width not considered #12

Closed TkinterinShanghai closed 3 years ago

TkinterinShanghai commented 3 years ago

The width of the scrollbar is not considered. If no margin on the left would be specified, the content of whatever has to be scrolled would be partly hidden behind the scrollbar. It would be nice if I wouldnt have to manually calculate the width of the scrollbar. This is also an issue when overflow is set to auto. Then the margin that was calculated for the scrollbar to not hide the content behind it would be too large because the scrollbar is not there

adoxography commented 3 years ago

If I'm understanding correctly, what you're saying is that you'd like it if the dimensions of a scrollbar were not taken into account when calculating the dimensions of a box. This is not how browsers natively handle scrollbars, and I think for good reason: one expects two elements with the same width, height, and padding to have the same dimensions, regardless of whether they have scrollbars. If the scrollbar were not taken into account, you could end up with it spilling outside of a container, and you'd be right back to the same problem, having to calculate how much width to take off of a box with a scrollbar. I think the sensible thing for the plugin to do is follow the lead of browsers, and let users deal with overlaps in specific cases on their end.

If I've misunderstood what you're saying, I'd be happy to look into it more, though it might be helpful to have a concrete example of what you're talking about (and, if possible, a way you'd suggest solving it through vanilla CSS).

TkinterinShanghai commented 3 years ago

I appreciate the fast response! A native scrollbar is not part of the margin of the scrolled container, this scrollbar however, takes that space of the margin and if the margin is too small, content will be covered by the scrollbar. I have a working example but its quite large. I could share my screen if youd wish to see it

isDipesh commented 3 years ago

The deprecated property overflow: overlay seems to be the problem in Chrome. From https://developer.mozilla.org/en-US/docs/Web/CSS/overflow,

overlay Behaves the same as auto, but with the scrollbars drawn on top of content instead of taking up space. Only supported in WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome or Opera) browsers.

TS-Tobias commented 1 year ago

I am having the same issue. The scrollbar hovers over the page content which is not the behavior of the default scrollbar in chromium-based browsers.

Would it be possible to remove overflow-overlay from the scrollbar and scrollbar-thin class and instead create an additional class scrollbar-hover to enable this behavior for chromium-based browsers?

overflow: overlay is deprecated anyway and will eventually stop working (docs). To prevent the behavior of scrollbar and scrollbar-thin from changing in the future, it makes more sense to extract the overflow: overlay property into a separate class and give users the choice if they want to use it or not.