Parent element padding not included

When the target element ([data-simplebar="init"]) has right padding (6px in this case), the .simplebar-scroll-content should also have the same padding added to the “scrollbar width” padding. Otherwise the native scrollbar becomes visible.

[data-simplebar=“init”] (6px right-padding)

.simplebar-scroll-content (20px right-padding and 26px right-padding)

[michaelkolber]

Can this perhaps be added to the Caveats section in the README? I had to search to find this, and while the solution was as easy as adding a container, having it on the repo’s homepage would have been helpful.

[Grsmto]

Hi guys,

I’m not 100% sure that’s the problem you encountered but the solution for this can be seen on this jsfiddle, you can see I applied a padding-right: 60px on the container: https://jsfiddle.net/Grsmto/y6fj691y/7/

The div on which you apply SimpleBar should be empty of any “layout” css property, otherwise it can break SimpleBar calculations. So if you want to add like, a padding, you’ll have to add an extra container div where you apply your padding.

I don’t want to start trying to “read” the css of the user and try to patch SimpleBar based on that cause it seems like a slippery slope to me (too many scenarios to handle) so I prefer to let that to the user!

Hope this help!