Making a div vertically scrollable using CSS

Question

This

<div id="" style="overflow:scroll; height:400px;">

gives a div that the user can scroll in both in horizontally and vertically. How do I change it so that the div is only scrollable vertically?

There's `overflow-x` and `overflow-y` in CSS3, which do what you want. — Marc B, Mar 14 '12 at 17:57
make sure your element doesn't have `pointer-events: none;` because it will disable the scrolling — kafinsalim, Mar 16 '21 at 04:46

score 855 · Accepted Answer · edited Mar 18 '14 at 19:29

You have it covered aside from using the wrong property. The scrollbar can be triggered with any property overflow, overflow-x, or overflow-y and each can be set to any of visible, hidden, scroll, auto, or inherit. You are currently looking at these two:

auto - This value will look at the width and height of the box. If they are defined, it won't let the box expand past those boundaries. Instead (if the content exceeds those boundaries), it will create a scrollbar for either boundary (or both) that exceeds its length.
scroll - This values forces a scrollbar, no matter what, even if the content does not exceed the boundary set. If the content doesn't need to be scrolled, the bar will appear as "disabled" or non-interactive.

If you always want the vertical scrollbar to appear:

You should use overflow-y: scroll. This forces a scrollbar to appear for the vertical axis whether or not it is needed. If you can't actually scroll the context, it will appear as a"disabled" scrollbar.

If you only want a scrollbar to appear if you can scroll the box:

Just use overflow: auto. Since your content by default just breaks to the next line when it cannot fit on the current line, a horizontal scrollbar won't be created (unless it's on an element that has word-wrapping disabled). For the vertical bar,it will allow the content to expand up to the height you have specified. If it exceeds that height, it will show a vertical scrollbar to view the rest of the content, but will not show a scrollbar if it does not exceed the height.

using overflow: auto somehow creates a gigantic empty block of space at the bottom of the page. Is this a common occurrence? — Stupid.Fat.Cat, Oct 03 '16 at 23:26

score 364 · Answer 2 · edited Jun 17 '22 at 13:44

364

Try like this.

<div style="overflow-y: scroll; height:400px;">

edited Jun 17 '22 at 13:44

ChrisF

134,786
31
255
325

answered Mar 14 '12 at 17:59

Milap

6,915
8
26
46

1

Good solution, but the scroll is always visible regardless of height – FindOutIslamNow Jun 25 '18 at 13:46
12

if you set the overflow-y value to 'auto', the scroll will be visible after defined height. for example
– Umair Gul Oct 21 '18 at 08:19
2

You shouldn't be plugging your youtube channel in answers if it's not related to the topic at hand. – rebane2001 Jun 17 '22 at 13:28

VVS · Answer 3 · 2015-10-21T12:43:37.070

179

For 100% viewport height use:

overflow: auto;
max-height: 100vh;

edited Oct 21 '15 at 12:43

answered May 29 '15 at 12:57

VVS

2,147
1
13
13

Thanks for the max-height. It's needed more often in my use case. – FarhanShares Nov 08 '20 at 07:33

score 60 · Answer 4 · answered Mar 14 '12 at 17:59

60

Use overflow-y: auto; on the div.

Also, you should be setting the width as well.

answered Mar 14 '12 at 17:59

Madara's Ghost

172,118
50
264
308

15

Why is setting the width imperative? – Lee Goddard Sep 16 '13 at 17:15
1

@LeeGee you need width to calculate whether the content of the div has gone outside the div boundaries and thus whether to enable scroll or not. – Roberto Bonini Nov 01 '16 at 13:13
Isn't the width 100% by default? – Lee Goddard Nov 07 '16 at 07:34
1

@LeeGee No, it's `auto` by default. Usually, that means 100% of the parent's width, but not always. – Madara's Ghost Nov 07 '16 at 09:22

divykj · Answer 5 · 2015-04-15T12:55:26.840

You can use this code instead.

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">

overflow-x: The overflow-x property specifies what to do with the left/right edges of the content - if it overflows the element's content area.
overflow-y: The overflow-y property specifies what to do with the top/bottom edges of the content - if it overflows the element's content area.

Values
visible: Default value. The content is not clipped, and it may be rendered outside the content box.
hidden: The content is clipped - and no scrolling mechanism is provided.
scroll: The content is clipped and a scrolling mechanism is provided.
auto: Should cause a scrolling mechanism to be provided for overflowing boxes.
initial: Sets this property to its default value.
inherit Inherits this property from its parent element.

Santosh Khalse · Answer 6 · 2017-01-24T10:28:44.367

You can use overflow-y: scroll for vertical scrolling.

<div  style="overflow-y:scroll; height:400px; background:gray">
  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.
  
  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.
  
  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.
  
  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.
  
  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>

score 11 · Answer 7 · edited Jul 10 '18 at 21:26

The problem with all of these answers for me was they weren't responsive. I had to have a fixed height for a parent div which i didn't want. I also didn't want to spend a ton of time dinking around with media queries. If you are using angular, you can use bootstraps tabset and it will do all of the hard work for you. You'll be able to scroll the inner content and it will be responsive. When you setup the tab, do it like this: $scope.tab = { title: '', url: '', theclass: '', ative: true }; ... the point is, you don't want a title or image icon. then hide the outline of the tab in cs like this:

.nav-tabs {
   border-bottom:none; 
}

and also this .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} and finally to remove the invisible tab that you can still click on if you don't implement this: .nav > li > a {padding:0px;margin:0px;}

score 2 · Answer 8 · answered Sep 30 '20 at 04:46

Well the above answers have give a good explanations to half of the question. For the other half.

Why don't just hide the scroll bar itself. This way it will look more appealing as most of the people ( including me ) hate the scroll bar. You can use this code

::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

zero · Answer 9 · 2021-08-16T09:03:53.473

Refer to this gist: https://gist.github.com/zeoneo/5f9fff92a12aa6d9d42065b5df68e9d5

It might help you to create a layout using flex and having self scrollable split panes.

body {
                background-color: aquamarine;
                margin: 0;
                padding: 0;
            }
            .container {
                height: 100vh;
                display: flex;
                flex-direction: column;
                background-color: bisque;
            }
            .left {
                width: 300px;
                background-color: lightblue;
                overflow: auto;
                scroll-behavior: smooth;

            }
            .right {
                flex:1;
                background-color: lightcoral;
                overflow: auto;
                scroll-behavior: smooth;
            }
            .sidebar-item {
                display: block;
                height: 100px;
                background-color: lightseagreen;
                margin: 5px;
            }
            .header {
                display: block;
                height: 100px;
                flex:none;
                background-color: aqua;
            }
            .content {
                flex:1;
                background-color: brown;
                display: flex;
                overflow: auto;
            }

<html>
    <head>
        <title>Hello World</title>

    </head>
    <body>
        <div class="container">
            <div class="header">
                Header
            </div>
            <div class="content">

            <div class="left myscroll">
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
            </div>
            <div class="right">
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
                <div class="sidebar-item"></div>
            </div>
        </div>

        </div>
    </body>
</html>

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/29199532) — Dominique, Jun 15 '21 at 12:38
@Dominique Could you please check if this meets the quality requirement. — zero, Aug 16 '21 at 09:05

score 1 · Answer 10 · answered Jun 09 '22 at 19:01

I have added some comments in the code for explanations. And here is some reference : https://www.w3schools.com/css/css_overflow.asp

div {
  overflow-y: auto; /* the auto value is similar to scroll, but it adds scrollbars only when necessary */
  word-break: keep-all; /* this is optional, so the words keep in one line */
  white-space: nowrap; /* this is optional, so the div can expands to the side */
}

<div>
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>

Making a div vertically scrollable using CSS

10 Answers10

Linked

Related