Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

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

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

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.



RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

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