आप Browser पर जो भी browse करते है उन सभी websites पर content के right side पर आपको scrollbar आता है | scrollbar नजर आने का कारण Website का कुछ content clipped होता है जो scroll करने पर नजर आता है | जैसे-जैसे Webpage का content बढ़ता है वैसे-वैसे scrollbar की छोटी हो जाती है |

Webpage के Scrollbar के लिए CSS के overflow property का इस्तेमाल किया जाता है | ये overflow property; scrollbar को control करने के लिए इस्तेमाल की जाती है |

Default overflow is visible

Browser Window को देखे तो default overflow ये 'auto' होता है | लेकिन आपने create किये container/box का overflow ये by default 'visible' होता है |

<style>
.container{
 width:300px;
 height:100px;
 border:1px solid;
}
</style>

<div class="container">
Default overflow is visible.
Default overflow is visible.
Default overflow is visible.
Default overflow is visible.
Default overflow is visible.
Default overflow is visible.
Default overflow is visible.
Default overflow is visible.
Default overflow is visible.
Default overflow is visible.
Default overflow is visible.
Default overflow is visible.
</div>

Values for overflow Property

• visible : Default. overflow content को clipped नहीं किया जाता है | Content का flow container/box के बहार जा सकता है |
• auto : Overflow content को clipped किया जाता है | Content का flow अगर container/box के बाहर जाता है तभी scrollbar display होता है |
• scroll : Overflow content को clipped किया जाता है | Container/box पर scrollbar को display किया जाता है |
• hidden : Overflow content को clipped किया जाता है | लेकिन overflow content को scroll नहीं किया जा सकता | Overflow content ये hidden होता है |

visible value for overflow Property

<style>
.container{
 width:200px;
 height:100px;
 border:1px solid;
 overflow : visible;
}
</style>

<div class="container">
Default overflow is visible.
Default overflow is visible.
Default overflow is visible.
Default overflow is visible.
Default overflow is visible.
</div>

auto value for overflow Property

<style>
.container{
 width:120px;
 height:100px;
 border:1px solid;
 overflow : auto;
}
</style>

<div class="container">
Default overflow is auto.
</div>

scroll value for overflow Property

<style>
.container{
 width:120px;
 height:100px;
 border:1px solid;
 overflow : scroll;
}
</style>

<div class="container">
Default overflow is scroll.
</div>

hidden value for overflow Property

<style>
.container{
 width:120px;
 height:100px;
 border:1px solid;
 overflow : hidden;
}
</style>

<div class="container">
overflow is hidden.
overflow is hidden.
overflow is hidden.
overflow is hidden.
overflow is hidden.
overflow is hidden.
overflow is hidden.
overflow is hidden.
</div>

Use overflow-x and overflow-y Property for Content Overflow

Overflow होनेवाले content को hrizontally(overflow-x) और vertically(overflow-y) scrolling को control करने के लिए इस्तेमाल किया जाता है |

overflow-x इस property से horizontal scrolling को control करने के लिए या vertical scrolling को control करने के लिए किया जाता है |

overflow-y इस property से vertical scrolling को control करने के लिए या vertical scrolling को control करने के लिए इस्तेमाल किया जाता है |

Example पर horizontal scrolling hidden किया गया है |

<style>
.container{
 white-space : nowrap;
 height:100px;
 width:200px;
 overflow-x : hidden;
 border : 1px solid;
}
</style>

<div class="container">
overflow-x is hidden.
overflow-x is hidden.
</div>

Example पर vertical scrolling hidden किया गया है |

<style>
.container{
 height:100px;
 width:200px;
 overflow-y : hidden;
 border : 1px solid;
}
</style>

<div class="container">
overflow-y is hidden.
overflow-y is hidden.
overflow-y is hidden.
overflow-y is hidden.
overflow-y is hidden.
</div>

Overflow Related Properties