How to always show the vertical scrollbar in a browser?

Question

I want to always show vertical scrollbar in my webpage. Is it possible using javascript? I think it is possible using javascript or jQuery. I want vertical scrollbar whether there is enough content to show or not.

thanks.

Possible duplicate of [Making the main scrollbar always visible](https://stackoverflow.com/questions/1202425/making-the-main-scrollbar-always-visible) — Bae, Jun 23 '17 at 00:35

score 161 · Accepted Answer · edited Apr 07 '14 at 15:23

161

jQuery shouldn't be required. You could try adding the CSS:

body    {overflow-y:scroll;}

This works across the latest browsers, even IE6.

edited Apr 07 '14 at 15:23

Salketer

14,263
2
30
58

answered Oct 29 '10 at 08:07

Coin_op

10,568
4
35
46

1

I believe the `overflow-x`and `overflow-x` have given me some pains in the past. – Julio Santos Oct 29 '10 at 08:12
6

I think this will display the scrollbar only when there is overflow. To display the scrollbar always try body { overflow-y: scroll; height: 101%; } – Nils Weinander Oct 29 '10 at 08:16
4

You have this round the wrong way. If you set the overflow:auto then the scroll bars show if necessary. overflow:scroll always shows the scrollbars. If the content isn't long enough then the scrollbars are greyed out. – Coin_op Oct 29 '10 at 08:26
If I want only two elements to be displayed in HTML select and still want vertical scrollbar then overflow-y:scroll; does not work. – Mukesh Feb 18 '13 at 05:54
This works for me, but I also had to add `!important` so that the Bootstrap modals I'm using won't hide the scrollbar. – William Apr 09 '15 at 21:26
I'm using the latest version of Chrome and Safari and it does not work for me in either. The scroll bar only appears once I try to scroll to see more content. Nothing I do seems to make any difference. – see sharper Jun 09 '15 at 07:13
This solution doesn't seem to be enough to always show the scrollbar – Brendan Metcalfe May 13 '21 at 19:11

molls223 · Answer 2 · 2015-07-07T20:22:51.817

57

Just a note: In OS X Lion, overflow set to "scroll" behaves more like auto in that scrollbars will only show when being used. They will disappear when not in use. So if any the solutions above don't appear to be working that might be why.

This is what you'll need to fix it:

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

You can style it accordingly.

edited Jul 07 '15 at 20:22

answered Jul 07 '15 at 20:15

molls223

1,366
10
6

Indeed it's [mac os specific](https://support.vagaro.com/hc/en-us/articles/204347160-Disable-Disappearing-Scroll-Bars-Mac) – Alejandro Oct 18 '21 at 11:38

Julio Santos · Answer 3 · 2014-03-11T16:30:02.677

16

Just use CSS.

body {
  overflow-y: scroll;
}

edited Mar 11 '14 at 16:30

answered Oct 29 '10 at 08:11

Julio Santos

3,837
2
26
47

Note the OP is looking to show only the *vertical* scrollbar. The `overflow` property in this case means the horizontal scrollbar would also be shown. You should use `overflow-y` instead. – Boaz Mar 11 '14 at 12:16

score 3 · Answer 4 · edited Mar 11 '14 at 17:33

3

set the overflow property of a containing div to scroll.

edited Mar 11 '14 at 17:33

Boaz

19,892
8
62
70

answered Oct 29 '10 at 08:11

jambox

584
4
15

score 3 · Answer 5 · edited Oct 29 '10 at 08:29

3

try calling a function on the onload method of your body tag and in that function change the style of body like this document.body.style.overflow = 'scroll'; also you might need to set the width of your html as this will show horizontal scroll bars as well

your html file will look something like this

<script language="javascript">
    function showscroll() {
        document.body.style.overflow = 'scroll';
    }
</script>
</head>
<body onload="showscroll()">

edited Oct 29 '10 at 08:29

answered Oct 29 '10 at 08:18

megha

170
2
10

2

Well, OP asked for a Javascript solution, but that doesn't mean that's what he needs. This is a very bad solution to change a style. This is what CSS is for: Cascaded **Style** Sheets. In CSS it's just a single line, like the accepted answer shows. – stevenvh May 16 '14 at 17:15

codeWithMe · Answer 6 · 2018-09-11T15:55:28.823

3

// Nothing to show here

body {
  height: 150vh;
}

::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .6);
}

/* Of course you can style it even more */

<h1 style="margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-family: Helvetica, Arial, sans-serif;">Scroll</h1>

edited Sep 11 '18 at 15:55

answered Sep 11 '18 at 11:34

codeWithMe

852
12
17

Can you clarify how exactly this code works to solve the problem in the question? – jwg Sep 11 '18 at 12:15
Hello, it works great with Macbook too, desktop computer but not with IPAD.Have you got a solution for IPAD , Iphone ? – Lorenzo Jun 20 '20 at 10:50

score 3 · Answer 7 · answered Feb 21 '20 at 07:31

3

Tried to do the solution with:

body {
  overflow-y: scroll;
}

But I ended up with two scrollbars in Firefox in this case. So I recommend to use it on the html element like this:

html {
  overflow-y: scroll;
}

answered Feb 21 '20 at 07:31

Cenco

61
3

score 1 · Answer 8 · edited Sep 10 '14 at 21:12

Here is a method. This will not only provide scrollbar container, but will also show the scrollbar even if content isnt enough (as per your requirement). Would also work on Iphone, and android devices as well..

<style>
    .scrollholder {
        position: relative;
        width: 310px; height: 350px;
        overflow: auto;
        z-index: 1;
    }
</style>

<script>
    function isTouchDevice() {
        try {
            document.createEvent("TouchEvent");
            return true;
        } catch (e) {
            return false;
        }
    }

    function touchScroll(id) {
        if (isTouchDevice()) { //if touch events exist...
            var el = document.getElementById(id);
            var scrollStartPos = 0;

            document.getElementById(id).addEventListener("touchstart", function (event) {
                scrollStartPos = this.scrollTop + event.touches[0].pageY;
                event.preventDefault();
            }, false);

            document.getElementById(id).addEventListener("touchmove", function (event) {
                this.scrollTop = scrollStartPos - event.touches[0].pageY;
                event.preventDefault();
            }, false);
        }
    }
</script>

<body onload="touchScroll('scrollMe')">

    <!-- title -->
    <!-- <div class="title" onselectstart="return false">Alarms</div> -->
    <div class="scrollholder" id="scrollMe">

</div>
</body>

Sarat Chandra · Answer 9 · 2017-06-12T03:40:38.987

0

Add the class to the div you want to be scrollable.

overflow-x: hidden; hides the horizantal scrollbar. While overflow-y: scroll; allows you to scroll vertically.

<!DOCTYPE html>
<html>
<head>
<style>
.scroll {
    width: 500px;
    height: 300px;
    overflow-x: hidden; 
    overflow-y: scroll;
}


</style>
</head>
<body>

<div class="scroll"><h1> DATA </h1></div>

edited Jun 12 '17 at 03:40

answered Jun 09 '17 at 08:37

Sarat Chandra

5,636
34
30

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Badacadabra Jun 09 '17 at 14:54
Please use the [edit] link to explain how this code works and don't just give the code, as an explanation is more likely to help future readers. See also [answer]. [source](http://stackoverflow.com/users/5244995) – Jed Fox Jun 09 '17 at 14:58

score 0 · Answer 10 · answered Aug 08 '22 at 21:20

This did the trick for me. The latter (property background) sets the scroll bar to be always visible and also accepts further customization.

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.5);
}

If the scroll appears/is needed, then, it is going to last forever.

score -2 · Answer 11 · answered Jan 07 '21 at 17:57

-2

I have been doing it this way:

.element {
    overflow-y: visible;
}

Painfully simple I know...

answered Jan 07 '21 at 17:57

Jason Is My Name

929
2
14
38

How to always show the vertical scrollbar in a browser?

11 Answers11

Linked

Related