Code to Move the Scrollbar to the Left Side

By Stephen Bucaro

The goal of any website layout should be to keep scrollbars in easy to reach positions as much as possible. If you put a scrollbar on the right side of an html element that is on the right side of the browser windows, it can easily move off-screen, taking away the user's ability to scroll.

You can easily move the scrollbar of a block-level html element to the left side by setting its direction property to rtl. rtl stands for right-to-left, it was intended to set the text writing direction of an element to right-to-left. I've never actually seen it do that, text is always rendered left-to-right. rtl only performs a text-align:right; adding the error of moving the last punctuation mark to the beginning of the last line.

direction:rtl; does cause the scrollbar to be moved to the left-side of a block-level element e.g. div, and I've never seen that fail. However, once you set an element's direction property to rtl, it's contents will be aligned right. You need to correct that by setting text-align:left;. Then all that remains is the the error of the moving the last punctuation mark to the beginning of the last line.

You can fix that error by enclosing the element's contents within <bdi></bdi> tags. bdi stands for Bi-Directional Isolation. It was designed to isolate section of text to prevent it from obeying the direction:rtl; setting. I've never actually seen it do that, text is always rendered left-to-right. The <bdi></bdi> tags do prevent the error of the moving the last punctuation mark to the beginning of the last line.

Shown below is example code that shows how to move the scrollbar to the left side.

<div style="width:350px; height:200px; padding:10px; border: solid 1px black; overflow:auto; direction:rtl; text-align:left;"><bdi>
The actual Enumeration shall be made within three Years after the first Meeting
of the Congress of the United States, and within every subsequent Term of ten
Years, in such Manner as they shall by Law direct. The Number of Representatives
shall not exceed one for every thirty Thousand, but each State shall have at Least
one Representative; and until such enumeration shall be made, the State of New
Hampshire shall be entitled to choose three, Massachusetts eight, Rhode Island and
Providence Plantations one, Connecticut five, New York six, New Jersey four,
Pennsylvania eight, Delaware one, Maryland six, Virginia ten, North Carolina five,
South Carolina five and Georgia three.
</bdi></div>

More Easy Cascading Style Sheets:
• Make a Fixed-width Variable-height Round Cornered Box
• Easier Expanding Menu Code
• Easy CSS 3D Mouse-over Pressed Text Effect
• CSS Arts and Crafts - Create a Graphic Cube Using the CSS3 Transform Property
• Add Background Color to a Heading
• Easy CSS Tabbed Navigation
• Create Custom Horizontal Rules
• How to Center a DIV Within a DIV
• Basic Introduction to Simple Responsive Design With Code
• Create a No Image Rollover Button or Badge

RSS Feed

 Follow @Stephen Bucaro

 General Web Design
 HTML Quick Reference
 CSS Quick Reference
 Java Script Quick Reference
 HTML Design
 Graphics Design
 Easy Cascading Style Sheets
 Easy Java Script Code
 Web Design Tools
 Coding Issues