tutorialpro.org -- What you learn is not just technology, but also dreams! tutorialpro.org -- What you learn is not just technology, but also"> tutorialpro.org -- What you learn is not just technology, but also dreams! tutorialpro.org -- What you learn is not just technology, but also" />
Easy Tutorial
❮ Getting Started With Typescript Javascript Modals ❯

To add a scrollbar to a div, simply set the overflow property to auto. The following example sets a horizontal scrollbar for the div:

Example

<div style="height:300px;width:70px;overflow:auto;background:#EEEEEE;">
tutorialpro.org -- What you learn is not just technology, but also dreams!
tutorialpro.org -- What you learn is not just technology, but also dreams!
tutorialpro.org -- What you learn is not just technology, but also dreams!
tutorialpro.org -- What you learn is not just technology, but also dreams!
</div>

The width and height can be set according to actual needs.

This example indicates that if the content of the div is taller than 300px, a vertical scrollbar will appear; if it's shorter, there will be no scrollbar. If the width is greater than 70px, a horizontal scrollbar will appear; if it's less, there won't be one.

If you want the scrollbar to always be present in the div, you can set the overflow property to scroll:

You can also set the overflow to scroll, that is:

Example

<div style="height:300px;width:200px;overflow:scroll;background:#EEEEEE;">
tutorialpro.org -- What you learn is not just technology, but also dreams!
tutorialpro.org -- What you learn is not just technology, but also dreams!
tutorialpro.org -- What you learn is not just technology, but also dreams!
tutorialpro.org -- What you learn is not just technology, but also dreams!
</div>

More Settings

Set only a horizontal scrollbar:

<div style="width:100px;overflow-x:auto"></div>

Set only a vertical scrollbar:

<div style="height:300px;overflow-y:auto"></div>

Set both horizontal and vertical scrollbars:

<div style="width:70px;height:300px;overflow-x:auto;overflow-y:auto"></div>

>

For more articles, you can refer to:

CSS Layout - Overflow

CSS Overflow Property

**Click to Share Notes

Cancel

-

-

-

❮ Getting Started With Typescript Javascript Modals ❯