Adding Scrollbars with CSS


Adding a scrollbar to a div helps to contain large amounts of text, or even multiple pictures, from expanding the size of your Run BASIC web page. Use CSSID to design the div and then include CSS scrollbar attributes to that div.

Auto Scrollbar


The css attribute scroll: auto will add a vertical scrollbar to your Run BASIC application. Design a DIV with
  • a defined width
  • a defined height
  • overflow set to auto

Although not necessary, it may be desirable to set
  • background color

for a better visual effect.

txt$ = "RUN BASIC Message - Since the web was invented "
txt$ = txt$ +"people have been creating applications "
txt$ = txt$ + "that run on it. This has always been really "
txt$ = txt$ + "hard... UNTIL NOW!"
 
cssID #ASB, "{
    width: 200px;
    height: 100px;
    overflow: auto;
    background-color: #C99;
    }"
 
Div ASB
    Print txt$;" ";txt$
End Div

Vertical Scrollbar


The vertical scrollbar can be designed using the overflow-y: scroll attribute. The code is similar. The div includes

  • a defined width
  • a defined height
  • overflow-y set to scroll

Optional attributes are

  • background color
  • padding

txt$ = "RUN BASIC Message - Since the web was invented "
txt$ = txt$ +"people have been creating applications "
txt$ = txt$ + "that run on it. This has always been really "
txt$ = txt$ + "hard... UNTIL NOW!"
 
cssID #VSB, "{
    width: 200px;
    height: 100px;
    overflow-y: scroll;
    background-color: #9C9;
    padding: 20px 20px 20px 20px;
    }"
 
Div VSB
    Print txt$;" ";txt$
End Div

Horizontal Scrollbar


The overflow: auto cannot be used to include a horizontal scrollbar. Instead, use overflow-x: scroll. The css attribute, white-space: nowrap must also be included. Since the text is designed not to be wrapped, the height need not be defined, but padding may be warranted. The required elements are

  • a defined width
  • overflow-x set to scroll
  • white-space set to nowrap

Optional settings are

  • background color
  • padding

txt$ = "RUN BASIC Message - Since the web was invented "
txt$ = txt$ +"people have been creating applications "
txt$ = txt$ + "that run on it. This has always been really "
txt$ = txt$ + "hard... UNTIL NOW!"
 
cssID #HSB, "{
    width: 200px;
    overflow-x: scroll;
    white-space: nowrap;
    background-color: #99C;
    padding: 20px 20px 20px 20px;
    }"
 
Div HSB
    Print txt$;" ";txt$
End Div

Browser Compatibilities

These codes have been successfully tested in
  • IE7
  • FireFox 2
  • FireFox 3
  • Opera 9.6

Please add your browser to this list if tested.