CSS overflow property with value scroll to add scrollbar

By Faruque Ahamed Mollick

Suppose you are going to put a large content or a large amount of text in an element. Then you may like a scroll functionality which will be used to see all the content or text inside it. Now in this article, I am going to show you how to add scrolling functionality in an element using CSS code.

Change text color on mouse hover – CSS code

CSS code to enable scroll in div

To add a scrollbar we are going to use CSS overflow property with value scroll. Below is the example CSS code which will enable scrolling functionality.

div {
    width: 390px;
    height: 50px;
    border: 1px solid #336600;
    overflow: scroll;
}

Now below is the given HTML code:

<div>

This text block is inside an element <br/>
which has CSS overflow property.<br/>
To see the whole text just scroll your mouse.<br/>
The value in CSS overflow property is set to scroll. <br/>
Which is responsible for <br/>
Scrolling functionality.<br/>
Test it on your browser<br/>

</div>

Now test it on your browser. You will see scrolling bar which let you scroll the text.

CSS Code To Change Text Selection Color

Now you can also use overflow-x and overflow-y CSS property which let you give more way of scrolling. Below is the example code:

div {
    width:210px;
    height:270px;
    overflow-x: scroll;
}

Or using the overflow-y property:

div {
    width:180px;
    height:220px;
    overflow-y: scroll;
}