Horizontal scrollbar on top

[Teufeuleu]

Hi, I have a horizontally scrollable div containing inline-blocks vertically-aligned on top. For aesthetic reasons I wanted to put the scrollbar on top of my content, instead of bottom (default behavior). I managed to do it with the following css modifications/additions: First I will say barHeight for height value of .simplebar-track.simplebar-horizontal .simplebar-scrollbar (7px by default) and space for the space between the scrollbar and the simplebar-content div (4px for example)

.simplebar-wrapper {padding-bottom: barHeight + space}
.simplebar-mask {margin-top: barHeight + space}
.simplebar-track.simplebar-horizontal {top: -barHeight} /*notice the minus*/
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {margin-top: barHeight}

So with default given values it would give:

.simplebar-wrapper {padding-bottom: 14px}
.simplebar-mask {margin-top: 14px}
.simplebar-track.simplebar-horizontal {top: -7px}
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {margin-top: 7px}

I'm not confident enough with CSS rules to say if this method is dirty or not, and I'm not yet confident enough with JavaScript to submit a proper, automated way of doing it, but I presume it is quite easy to implement new options such as topHorizontal (run above calculations if true) and space to set an optional space between scrollbar and content. Sorry if it looks not clear enough, obvious or non-relevant, as it is one of my very first steps on Github and with HTML/CSS/JS.

[EDIT] I know Simplebar is supposed to remain as simple as possible and only mimic default browser scrollbar behaviour, so maybe this will never be a new feature, but it's now it's at least a "documented" design trick.

[Grsmto]

Hi @Teufeuleu thanks for your report. The idea is that you should be able to override the default styles of SimpleBar to achieve such a thing, so if you managed to do so like you describe, it seems like a totally fine solution to me! As you managed to achieve this with pure CSS, I suppose this doesn't need extra JavaScript.

You are right that this would be great to document this, I think this could be added in a "cookbook" wiki page! I'll add a special label on the issue as I know multiple issues suggested such a thing.