220

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?

Benubird
  • 17,201
  • 25
  • 87
  • 134

8 Answers8

437

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).

Hidde
  • 10,623
  • 7
  • 40
  • 65
  • 13
    Note that overflow-y does only work if you specify `max-height` – Black Jul 12 '18 at 10:30
  • 2
    overflow-y doesn't need max-height. I never used max-height with overflow-y and it worked everytime. – Sumafu Jan 18 '19 at 09:59
  • 1
    @Sumafu you may need it depending on the case, as I could experience right now. – David Feb 12 '19 at 14:14
  • 2
    You would need `height` or `max-height` set if you're using `absolute` or `fixed` position on the overflow element as these prevent the element from resizing based on page or viewport boundaries. – Scott Schupbach Dec 18 '19 at 18:45
17

try this:

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
kleinohad
  • 5,590
  • 1
  • 25
  • 33
9

try

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
pbaris
  • 4,305
  • 4
  • 38
  • 60
6

try 

<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">
GrvTyagi
  • 3,853
  • 33
  • 37
5

Change overflow property of CSS block to auto.

overflow: auto;

It will automatically add a scrollbar to the left only when needed.

Showrin Barua
  • 1,659
  • 1
  • 8
  • 21
Jaisal Shah
  • 71
  • 1
  • 4
0

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>
Shailendra Kumar
  • 98
  • 10
0

You can try with below one:

  <div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>
Papun Sahoo
  • 357
  • 3
  • 13
  • Thanks, this was helpful. This solution works best if you don't have specific height/width (a more dynamic UI.) – DoomGoober Aug 15 '20 at 18:16
0

Stackblitz Playgrond

<!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>
khizer
  • 928
  • 9
  • 11