Closed szmarczak closed 1 year ago
The workaround currently I'm using is:
<div class="grow" bind:this={scrollable} data-overlayscrollbars-initialize>
<div id="actual-content" class="h-full" bind:this={browser}>...</div>
</div>
Notice the width: 100%;
Tailwind declaration, which shouldn't be necessary at all. I've been having terrible DX so far.
@szmarczak Good day :)
What can I say.. the plugin wraps your content, this is just how it works and it also will not change until more browsers will support the scroll-timeline api... in the mean time there is also the possibility to initialize the plugin in a way which gets rid of all the wrappers, but the scrollbars will be jumpy because of scroll connected css changes (which lag behind a little bit) - If you are interested let me know
Until then you're encouraged to solve your problems with the tools you like.. maybe OverlayScrollbars
simply isn't the right one
I have tried other tools, but this one is the best among them all!
It ain't perfect, but it's even much better than the native scrollbars (native scrollbars still emit mousedown events with target of the content behind them which is undesirable).
I'm no CSS nor UX master; but would it work if OverlayScrollbars did the below?
(from)
<div id="parent" data-overlayscrollbars-initialize>...</div>
(into)
<div class="os-wrapper">
<div id="parent">...</div>
<div class="os-track">...</div>
</div>
This way it wouldn't override the parent, but wrap the entire thing in a brand new element.
there is also the possibility to initialize the plugin in a way which gets rid of all the wrappers, but the scrollbars will be jumpy because of scroll connected css changes (which lag behind a little bit)
Does this mean that the scrollbars have to obstruct content behind them? I was thinking of something like this:
<div class="flex">
<div class="grow min-w-0 flex flex-col">
<div class="grow">
<div>actual content</div>
</div>
<div class="shrink-0 scrollbar-track-horizontal"></div>
</div>
<div class="shrink-0 scrollbar-track-vertical"></div>
</div>
Currently I'm using padding to leave space for the scrollbars.
Describe the bug
It wraps the content instead of the entire element which changes the target in click events.
To Reproduce
Environment