Problem
This is the div I have:
<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>
Even if the text does not overflow, the scrollbars are always visible. I want the scrollbars to only appear when they’re needed, which means only when there’s enough content in the box for them to be useful. In the same way as a textarea does. How do I go about doing this? Is styling a textarea to look like a div my only option?
Asked by Benubird
Solution #1
Use the overflow: auto option. Scrollbars will appear only when they are required.
(As a side note, you may specify overflow-x: auto and overflow-y: auto for merely the x and y scrollbars.)
Answered by Hidde
Solution #2
try this:
<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
Answered by kleinohad
Solution #3
try
<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
Answered by pbaris
Solution #4
try
<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">
Answered by GrvTyagi
Solution #5
Set the CSS block’s overflow property to auto.
overflow: auto;
It will only add a scrollbar to the left when it is required.
Answered by Jaisal Shah
Post is based on https://stackoverflow.com/questions/14732448/how-do-i-make-the-scrollbar-on-a-div-only-visible-when-necessary