Scrolling using div | How to make div scrollable? | Scrollable div | Automatic scrolling Div

Hello today we will see how we can implement scrollbars for elements, controls of the web page using simple div element. The div element is strongly supported for implementing scrollbars.

Scrollbars are sometimes very very essential for our web pages so that large content within elements can be displayed without the need to show all content spreading across the length and breadth of the web page or form.

We will see how 2 types of scrollbars can be implemented using div

1)      Automatic scrollbars (scrollbars css - overflow:auto;)

These scrolls will only be seen when content within the div is exceeding the assigned height or width of the div.

If content exceeds more than allotted div height then vertical scroll is visible.

If content exceeds more than allotted div width then horizontal scroll is visible.

If content exceeds more than allotted div height as well as width then vertical and horizontal  scroll is visible

HTML CODE

<div class="container">
    <p class="nowrapCss">
        This is test This is test text This is test This is test text <br/>
        This is test This is test text This is test This is test text <br/>
        
        This is test This is test text This is test This is test text <br/>
        This is test This is test text This is test This is test text <br/>
        
        This is test This is test text This is test This is test text <br/>
        This is test This is test text This is test This is test text <br/>
        
        This is test This is test text This is test This is test text <br/>
        This is test This is test text This is test This is test text <br/>
        
        This is test This is test text This is test This is test text <br/>
        This is test This is test text This is test This is test text <br/>
        
        This is test This is test text This is test This is test text <br/>
        This is test This is test text This is test This is test text <br/>
    </p>
</div>

<style type="text/css">

.container
{
    height:200px;
    width:200px;
    border: solid 1px blue;
    overflow:auto;  
    
}

.nowrapCss
{
    white-space:nowrap;  
}

</style>

Output

2)      Always visible scrollbars (scrollbars css - overflow:scroll;)

These scrolls will be visible always. They will be disabled by default. If content exceeds div height or width then corresponding scrollbar will get enabled.

HTML CODE

<div class="container">
    <p class="nowrapCss">
        This is test This is test text This is test This is test text <br/>
        This is test This is test text This is test This is test text <br/>
        
        This is test This is test text This is test This is test text <br/>
        This is test This is test text This is test This is test text <br/>
        
        This is test This is test text This is test This is test text <br/>
        This is test This is test text This is test This is test text <br/>
        
        This is test This is test text This is test This is test text <br/>
        This is test This is test text This is test This is test text <br/>
        
        This is test This is test text This is test This is test text <br/>
        This is test This is test text This is test This is test text <br/>
       
    </p>
</div>

 CSS CODE

<style type="text/css">

.container
{
    height:220px;
    width:350px;
    border: solid 1px blue;
    overflow:scroll;  
    
}

.nowrapCss
{
 white-space:nowrap;  
}

</style>

OUTPUT

Here when content will exceed then disabled scrolls will get enabled.

In both the above examples it is very important to set a width and height to the scroll div. Only then will the div identify that the content has been exceeded within it and only then will scrollbars get executed correctly