How do I make the scrollbar on a div only visible when necessary?
CssHtmlScrollbarCss Problem Overview
I have this div:
<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>
The scrollbars are always visible, even though the text does not overflow. I want to make the scrollbars only be visible when necessary - that is, only visible when there is enough text in the box that they are needed. Like a textarea does. How do I do this? Or is my only option to style a textarea so it looks like a div?
Css Solutions
Solution 1 - Css
Use overflow: auto. Scrollbars will only appear when needed.
(Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto and overflow-y: auto).
Solution 2 - Css
try this:
<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
Solution 3 - Css
try
<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
Solution 4 - Css
try
<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">
Solution 5 - Css
Change overflow property of CSS block to auto.
overflow: auto;
It will automatically add a scrollbar to the left only when needed.
Solution 6 - Css
I found that there is height of div still showing, when it have text or not. So you can use this for best results.
<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>
Solution 7 - Css
You can try with below one:
<div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>
Solution 8 - Css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#scrollable-content {
background: #eee;
height: 150px;
width: 400px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="original-content"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
<br />
<div id="scrollable-content"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
</body>
</html>