Children have different parent

[szmarczak]

Describe the bug

It wraps the content instead of the entire element which changes the target in click events.

To Reproduce

1. Go to https://stackblitz.com/edit/vitejs-vite-txduyy?file=src%2FApp.svelte&terminal=dev
2. Click on empty space like said on the website
3. Expected: true. Actual: false.

Environment

• Used Operating System(s): Windows 11
• Used Browser(s) (with version): Google Chrome 114.0.5735.199 (Official version) (64-bit) (cohort: Stable)

[szmarczak]

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.

[KingSora]

@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

[szmarczak]

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.

[szmarczak]

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.