How to always show the vertical scrollbar in a browser?
Solution 1
jQuery shouldn't be required. You could try adding the CSS:
body {overflow-y:scroll;}
This works across the latest browsers, even IE6.
Solution 2
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.
Solution 3
Just use CSS.
body {
overflow-y: scroll;
}
Solution 4
set the overflow
property of a containing div
to scroll
.
Solution 5
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;
}
Related videos on Youtube
gautamlakum
I help startups and enterprises go ahead with their digital products. Product Designer. Design Sprint Facilitator.
Updated on July 05, 2022Comments
-
gautamlakum almost 2 years
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.
-
Muhammad Hashir Anwaar about 12 yearsyou gotta ask these things to learn.
-
Bae almost 7 yearsPossible duplicate of Making the main scrollbar always visible
-
-
Julio Santos over 13 yearsI believe the
overflow-x
andoverflow-x
have given me some pains in the past. -
Nils Weinander over 13 yearsI think this will display the scrollbar only when there is overflow. To display the scrollbar always try body { overflow-y: scroll; height: 101%; }
-
Coin_op over 13 yearsYou 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.
-
Boaz about 10 yearsNote 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 useoverflow-y
instead. -
stevenvh about 10 yearsWell, 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.
-
jwg over 5 yearsCan you clarify how exactly this code works to solve the problem in the question?
-
Lorenzo almost 4 yearsHello, it works great with Macbook too, desktop computer but not with IPAD.Have you got a solution for IPAD , Iphone ?
-
Alejandro over 2 yearsIndeed it's mac os specific