我想在我的网页中始终显示垂直滚动条。可以使用javascript吗？我认为可以使用javascript或jQuery。我想要垂直滚动条是否有足够的内容显示或不显示。
谢谢。
不应该要求jQuery。您可以尝试添加CSS：
body {overflow-y:scroll;}
这适用于最新的浏览器，甚至是IE6。
请注意：在OS X Lion中，设置为“滚动”的溢出行为更像汽车，因为滚动条仅在使用时显示。它们会在不使用时消失。因此，如果上述任何解决方案似乎不起作用，那可能就是原因。
这是您需要解决的问题：
::-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);
}
你可以相应地设计它。
只需使用CSS。
body {
overflow-y: scroll;
}
将包含overflow property的div设置为scroll。
尝试在body标签的onload方法上调用一个函数，并在该函数中更改body的样式，就像这个document.body.style.overflow ='scroll';您也可能需要设置html的宽度，因为这也会显示水平滚动条
你的html文件看起来像这样
<script language="javascript">
function showscroll() {
document.body.style.overflow = 'scroll';
}
</script>
</head>
<body onload="showscroll()">
这是一种方法。这不仅会提供滚动条容器，而且即使内容不够（根据您的要求）也会显示滚动条。也适用于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>
将类添加到要滚动的div中。
overflow-x：hidden;隐藏水平滚动条。溢出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>
// 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>