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>
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:
• How to Style a Table
• How to Use a Starburst on Your Web Page
• Easy CSS Popup Windows
• Easy Oval Image Mask With CSS
• How to Color Alternating Rows or Columns in a Table
• How to Style a List
• Style Your Imagemap Tooltips
• Easy CSS Animated Flaming Text
• Easy Scrollable Area Code
• How to Use a Pull Quote
|
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
