Place of scroll track

[leereichardt]

Is it possible to put the scroll bars on the outside of the container? Quite often I require the scroll content to be laid out exactly as is but nicely scrollable, but with OverlayScrollbars, it often places the scrollbar over the content.

[KingSora]

Good day! - There was an issue similar to yours: https://github.com/KingSora/OverlayScrollbars/issues/17

Basically it is possible and the plugin doesn't require the scrollbars to be inside. The problem is the managment of the scrollbars.

Personally I think this feature isn't necessary since the plugin gives you enough freedom to customize the padding to the content and the scrollbars. It's only a matter of how you take advantage of it. To demonstrate this, I've created two fiddles, one in which the scrollbars are outside and one in which the padding is used in a way in which it just looks like the scrollbars are outside.

A demo where it just looks like the scrollbars are outside: https://jsfiddle.net/bedam73j/ A demo where the scrollbars are outside: https://jsfiddle.net/bedam73j/2/

If you compare them side by side (and ignore that I set a different background color of the #wrapper for better visibility), you won't notice any difference. It's just a matter of how you organize your structure. The managment of the scrollbars is just much more straight forward if they stay inside the container, so you don't have anything floating somewhere in your DOM. This can cause more problems than it solves.

[KingSora]

I'll close this issue. If you have any other questions related to this topic or if this problem isn't solved by my answer please feel free to reopen.

[sujith-sairam]

@KingSora Have you overcomed this issue in the latest version ? If it is ..kindly tell me how to implement it.

[KingSora]

@sujith-sairam Yes, in v2 you can have the scrollbars outside of the host element and everything will work without problems.

You can do that by defining a scrollbars slot in the initialization:

OverlayScrollbars({ 
 target: document.querySelector('#target'),
 scrollbars: {
   slot: document.querySelector('#scrollbarsSlot'),
 },
}, {});

Or you can just move the generated scrollbars after the initialization to your desired container(s):

OverlayScrollbars(document.querySelector('#target'), {}, {
  initialized: (osInstance) => {
    const { scrollbarHorizontal, scrollbarVertical } = osInstance.elements();

    document.querySelector('#scrollbarHorizontalSlot').append(scrollbarHorizontal.scrollbar);
    document.querySelector('#scrollbarVerticalSlot').append(scrollbarVertical.scrollbar);

    // you could even clone scrollbars:
    const clonedScrollbarHorizontal = scrollbarHorizontal.clone();
    document.querySelector('#scrollbarHorizontalSlot').append(clonedScrollbarHorizontal.scrollbar);
  }
});

[sujith-sairam]

@KingSora Thanks for your reply it would be helpful if you provide docs for v2 like the one you provide for v1.

[KingSora]

@sujith-sairam The docs for v1 required a really long time to create.. I sadly just don't have the same amount of time right now as I had back then.. But I'm working on it

[sujith-sairam]

@KingSora .os-host-scrolling class name in styling is not available in v2 , i need to perform an styling action while scrolling ,is there any way to achieve it ??

[KingSora]

@sujith-sairam You can add any class in the scroll event to achieve the desired behavior.

Please open an discussion or a new issue if you have further questions...