Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Code to Move the Scrollbar to the Left Side

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>


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.

More Easy Cascading Style Sheets:
• Easy CSS Buttons
• Easy CSS 3D Text Effect
• Easy Text Drop Shadows
• Using the HSL Color Specification
• How to Style a Table
• Create a Cool Picture Frame Effect with CSS
• Easy CSS 3D Mouse-over Pressed Text Effect
• Flat Design and Ghost Buttons
• Create Animated Glowing Text
• How to Use a Starburst on Your Web Page

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268