我想始终在网页中显示垂直滚动条。是否可以使用javascript?我认为可以使用javascript或jQuery。我要垂直滚动条是否有足够的内容来显示或不显示。
谢谢。
我想始终在网页中显示垂直滚动条。是否可以使用javascript?我认为可以使用javascript或jQuery。我要垂直滚动条是否有足够的内容来显示或不显示。
谢谢。
Answers:
不需要jQuery。您可以尝试添加CSS:
body {overflow-y:scroll;}
这适用于最新的浏览器,甚至IE6。
overflow-x
,overflow-x
过去曾给我带来一些麻烦。
!important
有用,但是我还必须添加,以使我使用的Bootstrap模态不会隐藏滚动条。
请注意:在OS X Lion中,设置为“ scroll”的溢出行为更像auto,因为滚动条仅在使用时显示。不使用时它们会消失。因此,如果上述任何解决方案似乎都不起作用,那可能就是原因。
这是您需要解决的问题:
::-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
在这种情况下,该属性意味着还将显示水平滚动条。您应该overflow-y
改用。
将包含的overflow
属性设置div
为scroll
。
尝试在body标签的onload方法上调用一个函数,然后在该函数中更改此文档的主体样式。body.style.overflow='scroll'; 您也可能需要设置html的宽度,因为这也会显示水平滚动条
您的html文件将如下所示
<script language="javascript">
function showscroll() {
document.body.style.overflow = 'scroll';
}
</script>
</head>
<body onload="showscroll()">
// 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>
这是一种方法。即使内容不足(根据您的要求),这不仅会提供滚动条容器,还会显示滚动条。也可以在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中。
溢出-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>