Html 如何始终在浏览器中显示垂直滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4050076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to always show the vertical scrollbar in a browser?
提问by gautamlakum
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.
我想总是在我的网页中显示垂直滚动条。是否可以使用javascript？我认为可以使用 javascript 或 jQuery。我想要垂直滚动条是否有足够的内容显示。
thanks.
谢谢。
回答by Coin_op
jQuery shouldn't be required. You could try adding the CSS:
jQuery 不应该是必需的。您可以尝试添加 CSS：
body {overflow-y:scroll;}
This works across the latest browsers, even IE6.
这适用于最新的浏览器，甚至 IE6。
回答by molls223
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.
请注意：在 OS X Lion 中，溢出设置为“滚动”的行为更像自动，因为滚动条只会在使用时显示。不使用时它们会消失。因此，如果上述任何解决方案似乎不起作用，那可能就是原因。
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.
您可以相应地设置样式。
回答by Júlio Santos
Just use CSS.
只需使用 CSS。
body {
overflow-y: scroll;
}
回答by jambox
set the overflowpropertyof a containing divto scroll.
设置overflow属性含的div到scroll。
回答by megha
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
尝试在 body 标签的 onload 方法上调用一个函数，并在该函数中更改 body 的样式，例如 document.body.style.overflow = 'scroll'; 您还可能需要设置 html 的宽度，因为这也会显示水平滚动条
your html file will look something like this
你的 html 文件看起来像这样
<script language="javascript">
function showscroll() {
document.body.style.overflow = 'scroll';
}
</script>
</head>
<body onload="showscroll()">
回答by SandBag_1996
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..
这里有一个方法。这不仅会提供滚动条容器，而且即使内容不够（根据您的要求）也会显示滚动条。也适用于 Iphone 和 android 设备。
<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>
回答by codeWithMe
// Nothing to show herebody {
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>回答by Cenco
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:
但在这种情况下，我最终在 Firefox 中得到了两个滚动条。所以我建议在 html 元素上使用它，如下所示：
html {
overflow-y: scroll;
}
回答by Sarat Chandra
Add the class to the div you want to be scrollable.
将类添加到要滚动的 div。
overflow-x: hidden;hides the horizantal scrollbar. While overflow-y: scroll;allows you to scroll vertically.
溢出-x：隐藏；隐藏水平滚动条。而溢出-y：滚动；允许您垂直滚动。
<!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>
