Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Place scrollbar outside of the scrollable container #158

Closed
jonrz opened this issue Nov 19, 2019 · 2 comments
Closed

Place scrollbar outside of the scrollable container #158

jonrz opened this issue Nov 19, 2019 · 2 comments

Comments

@jonrz
Copy link

jonrz commented Nov 19, 2019

I was just trying to get the scrollbar outside of the scrollable container, and I had to hack it so:

.os-host-overflow { overflow: visible !important; }
.os-scrollbar.os-scrollbar-vertical { transform: translateX(13px); }
.os-scrollbar.os-scrollbar-horizontal { transform: translateY(13px); }

image

However, I am still not sure if this will break anything in there, but my tests shows no breaks so far.
I would like to suggest a way of placing the scrollbar outside of the scrollable container, either by removing the overflow hidden in the outermost container, or placing the scrollbar nested a level above, and pad the container.

@wza666
Copy link

wza666 commented Nov 27, 2019

@jonrz fix your import order:

  1. import 'overlayscrollbars/css/OverlayScrollbars.min.css';
    2 import OverlayScrollbar from 'overlayscrollbars/js/OverlayScrollbars.min';

@KingSora
Copy link
Owner

KingSora commented Dec 31, 2019

Good day!

Sorry for the late answer, but I've overlooked your issue. The plugin doesn't officialy support the placement of the scrollbars outside of the host-element. If you just need some space between the scrollbars and your content, I would recommend to use the paddingAbsolute option to make that happen. I've created a small showcase of this option the FAQ (4th question from the top).

To your "hack", it's possible that this change:

.os-host-overflow { overflow: visible !important; }

Can cause unexpected behavior, but only in very specific cases. If everything is running without any noticable error, then it's fine and you can keep the hack. But please be aware of potential (hard to test and trace back) errors because of this. These can occur with very exotic styling / DOM (auto height / auto witdh with float, position fixed, negative margin, inline-block elements, flex elements etc.).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants