How to add scroll bar in HTML CSS

How to add scroll bar in HTML CSS. While writing a post sometimes we require a line to appear without any break, more than the provided width of the post and sometimes we do not want to exceed the height of the post with all the content appear in the blog. Here we require scroll bar box. You can add horizontal scroll bar in a box or vertical or both horizontal or vertical scroll bar to function in a box with help of overflow element.

How to add scroll bar in html
How to add scroll bar in html

How to add scroll bar in HTML CSS

Adding a  vertical scroll in a box :

Here is the html code :

<div style=”height:100px; width:550px; overflow-y: scroll; padding-bottom:10px; border:3px solid black; “>
<pre>

your text

</pre>
</div>

which will look as :

html code to put scroll box appear in the post :

vertical scroll box

horizontal scroll box

both vertical and horizontal scroll box

 

Adding a horizontal scroll in a box :

Here is the html code :
<div style=”height:200px; width:550px; overflow-x: scroll; padding-bottom:10px; border:3px solid black; “>
<pre>

put your text here

</pre>
</div>

Which will look as :

html code to put scroll box appear in the post :vertical scroll box

horizontal scroll box

both vertical and horizontal scroll box

Adding both horizontal and vertical scroll box :

html code is  :

<div style=”height:200px; width:550px; overflow-x: scroll; overflow-y: scroll padding-bottom:10px; border:3px solid black; “>
<pre>

put your text here

</pre>
</div>

Which will look as :

html code to put scroll box appear in the post :

   vertical scroll box

     horizontal scroll box

       both vertical and horizontal scroll box

You can configure your box with the attributes like, set the font style, font size, color of fonts, background color of the box, border style etc.

For example :

html code to put scroll box appear in the post :

   vertical scroll box

     horizontal scroll box

       both vertical and horizontal scroll box

For the box above html code is :

<div style=”width: 550px; height: 200px; color: 000000; background-color: #DC143C; font-family: arial; font-size: 12px; text-align: left; border: 2px dashed 000000; overflow:scroll; padding: 4px;”>
<pre>

put your text here

</pre>
</div>

If you have any problem related to code of How to add scroll bar in HTML CSS, ask by writing comment on the below space provided. We will work on that. Your valuable suggestion and feedback are always welcomed.