To add a scrollbar to a div, just specifyoverflowthe attribute asautoThat's all. The following example sets a horizontal scrollbar for the div:
Example
<div style="height:300px;width:70px;overflow:auto;background:#EEEEEE;">Example Tutorial -- What you learn is not only technology, but also dreams!!!
Example Tutorial -- What you learn is not only technology, but also dreams!!!
Example Tutorial -- What you learn is not only technology, but also dreams!!!
Example Tutorial -- What you learn is not only technology, but also dreams!!!</div>
Try it yourself »
Width and height can be set according to actual needs.
The above example shows that if the height of the div content is greater than 300px, a vertical scrollbar will appear; if it is less than 300px, there is no scrollbar. If the width is greater than 70px, a horizontal scrollbar will appear; if it is less, there is none.
If you want the scrollbar to always exist in the div, you can set the overflow property to scroll:
You can also set overflow to scroll, i.e.:
Example
<div style="height:300px;width:200px;overflow:scroll;background:#EEEEEE;">Example Tutorial -- What you learn is not only technology, but also dreams!!!
Example Tutorial -- What you learn is not only technology, but also dreams!!!
Example Tutorial -- What you learn is not only technology, but also dreams!!!
Example Tutorial -- What you learn is not only technology, but also dreams!!!</div>
Try it yourself »
More settings
Set only horizontal scrollbar:
<div style="width:100px;overflow-x:auto"></div>
Set only vertical scrollbar:
<div style="height:300px;overflow-y:auto"></div>
Set both horizontal and vertical:
<div style="width:70px;height:300px;overflow-x:auto;overflow-y:auto"></div>
For more articles, refer to: