Scrollbar position

[hello-steven]

I have a layout that requires the scrollbar to be positioned on the outside of the scrollable content. If I add right: -4.24vw; or transform: translateX(4.24vw); the overflow: hidden !important class on the .os-host-overflow element cuts off the scrollbar. I manually overwrote this CSS style and it looks ok in chrome 64 (Mac OSX), but I haven't tested in other browsers yet.

I found a link to this library on reddit and decided to give it a try. So far it handles scrolling noticeably better than the malihu custom scrollbar plugin. The malihu plugin would occasionally lurch the scroll position while scrolling.

[KingSora]

Good day!

The overflow : hidden !important rule is here because if your target container has a auto size (height: auto or width: auto with float: left) and the parent container has overflow: auto there would occur a overflow in certain behaviors. It's a bit hard to explain, I am sorry.

Long story short: If your container has a fixed height and width (everything except height: auto and width: auto with float: left) or your parent container has overflow: hidden you are good to go and can change that rule. Nevertheless I can't recommend it - maybe there are some cases I haven't tought of.

Maybe there is another way to achieve your goal. - Can you tell me exactly why the scrollbars have to be outside? A small example fiddle would be also great so I can determine what markup you have.
If you only need space between the scrollbars and the content I think this solution would be better: https://jsfiddle.net/sko4rwmk/

Basically the plugin doesn't care where the scrollbars are. If you really need the scrollbars outside of the container you've still the chance to do it with javascript: https://jsfiddle.net/sko4rwmk/1/
I've to admin this solution is a bit messy, but I havent thought of this feature until now. Maybe I'll come up with a concept in the future (because it's only a matter of correct styling - the place in the DOM isn't important).

Oh and could you please send me the reddit thread? I'd like to read it! :)

[hello-steven]

Thank you for taking the time to discuss this edge case with me :)

I believe the biggest reason why I went with positioning the scrollbar outside the content area was because I already had to structure the scrollbar that way using the malihu library.

malihu: springerinn.com
overlayscrollbars: springerinn.stevenjacobprice.com

I did a quick attempt to target body as the scroll container, but there is a lot of CSS baked in that I'd have to sort through and update to get the rest of the layout working again. So the easiest solution was to change the overflow: hidden !important rule and position the scrollbar outside of the content area.

Your JS approach is compelling, I might end up going that route instead. Thank you :)

Here's the reddit link, although it looks like you've already had a chance to see it:
https://www.reddit.com/r/webdev/comments/85a8ds/overlay_scrollbars_custom_styleable_overlay/

[KingSora]

Alright, no problem pal :)

If you need more help, please don't hesitate to open a issue!