---

Search posts under HTML5:

---

Scroll bar in HTML5

How to create a scroll bar in HTML?

Scroll bar

It is used to make the page scroll 

  <h2 style="color:blue">Scroll bar</h2>
    <div style="width:50px;height:50px;overflow:scroll;padding:5px;">
        Techfunda is a online tutorials
    </div>

In the above code snippet we have defined the creating scroll bar we have the function as width as 50 , height, 50, overflow as scroll

output

Scroll bar with color

It is used to add he color of the scroll bar

 <h2 style="color:blue">Scroll bar with color</h2>
    <div style="width:100px;height:75px;overflow:scroll;background-color:#FCFADD;color:blue;scrollbar-base-color:yellow;">
        Techfunda dotnetfunda itfunda kidsfunda, farming funda
    </div>

Scroll bar with color

In the above code snippet we have defined the creating scroll bar we have the function as width as 50 , height, 50, overflow as scroll with background color as #FCFADD

output

Scroll bar with border

We can create the scroll bar with borderusing css properties as 

 <h2 style="color:blue">Scroll bar with Border</h2>
    <div style="width:150px;height:150px;line-height:3em;overflow:scroll;padding:5px;background-color:red;color:lime;border:4px double violet;">
    Techfunda is the largets online tutorials  
     </div>

Scroll bar with border

In the above code snippet we have defined the scroll bar with border we are having the border as 4px double violet color as border  with the scroll bar properties

output