CSS overflow property with value scroll to add scrollbar
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; }
Leave a Reply