Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<!-- The inset is logical, so in RTL the inline-start end is the physical right.
This declares the inset on the inline-END, which in RTL resolves to the
physical LEFT - the same physical result as the LTR reference declaring it on
the inline-start. Matches only if nsScrollbarFrame maps the logical start onto
a physical side and swaps the pair; without that swap the inset lands on the
right here and this fails.
scrollLeft is normalised so both documents have the thumb at the same end;
RTL otherwise starts scrolled to the opposite end from LTR. -->
<style>
#outer {
direction: rtl;
overflow-x: scroll;
overflow-y: hidden;
width: 300px;
height: 100px;
background: white;
scrollbar-color: black white;
-moz-scrollbar-inset-inline: 0 40px;
}
#inner {
width: 900px;
height: 20px;
}
</style>
<div id="outer"><div id="inner"></div></div>
<script>
// Scroll fully to the physical left in both writing modes.
const outer = document.getElementById("outer");
outer.scrollLeft = -(outer.scrollWidth - outer.clientWidth);
</script>