Question

I’m developing a web interface involving a JavaScript scrollbar restyling solution that attempts to hide the browser’s default scrollbar behind an HTML/CSS replacement, while preserving support for the browser’s default scrolling behavior, a feature many popular JS scrollbar plugins lack. The only issue I’ve encountered with this method is that some browsers insist on displaying the default scrollbar on top of the one created by the plugin, destroying the desired aesthetic altogether.

In an attempt to solve this problem, I tried wrapping the element containing the scrollbar in a div with overflow: hidden; and using JS to detect the width of the default scrollbar and position the element it controls so that it falls outside the clipping boundary of the parent div. However, as many of you probably know, Content that spans beyond the bottom or right boundary of an element with overflow: hidden can be accidentally scrolled into view during mouse dragging operations like text selection in which the course crosses the bottom or clipping boundary of the concealing parent element (i.e: dragging to the right would bring the default scrollbar back into view).

Luckily, though, this behavior does not occur when content extends beyond the top or left boundary in such a scenario. Knowing this, I’m considering continuing with the approach outlined above, but styling the scrolling element with direction: rtl to flip its scrollbar from right to left, and beyond the boundary of the concealing element, then applying direction: ltr to the child element containing all of its contents to negate the direction change for all of the actual content.

This technique produced the desired result in every test I’ve conducted thus far. However, I’m wondering if this solution is too good to be true, and I’m overlooking a fatal accessibility and/or compatibility issue with CSS direction for scrollbar placement that should prevent me from using this method.

TL;DR: Is using the CSS direction property to control the position of an element’s scrollbar a bad idea?

Answer 1

In terms of correct usage of the property, it is a bad idea. direction: rtl is correctly used to flip the reading direction of text using alternate character encoding e.g. Arabic, Hebrew, etc. Try and find another way around the issue. Try taking a look at the source of some of the aforementioned popular JS scrollbar plugins to see how they do this.