How to always show the vertical scrollbar in a browser?

小开

最佳答案

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

body    {overflow-y:scroll;}

This works across the latest browsers, even IE6.

小开

Just use CSS.

body {
overflow-y: scroll;
}

小开

set the overflow property of a containing div to scroll.

小开

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()">

小开

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>

小开

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.

小开

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>

小开

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

小开

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;
}

小开

I have been doing it this way:

.element {
overflow-y: visible;
}

Painfully simple I know...

小开

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.