Я хочу всегда показывать вертикальную полосу прокрутки на своей веб-странице. Можно ли использовать 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 в этом случае означает, что также будет отображаться горизонтальная полоса прокрутки. Вместо этого вы должны использовать overflow-y. 11.03.2014 попробуйте вызвать функцию в методе onload вашего тега body и в этой функции измените стиль тела, как этот document.body.style.overflow = 'scroll'; также вам может потребоваться установить ширину вашего html, так как это также покажет горизонтальные полосы прокрутки
ваш html файл будет выглядеть примерно так
<script language="javascript">
function showscroll() {
document.body.style.overflow = 'scroll';
}
</script>
</head>
<body onload="showscroll()">
Пытался сделать решение с помощью:
body {
overflow-y: scroll;
}
Но в этом случае я получил две полосы прокрутки в Firefox. Поэтому я рекомендую использовать его для элемента html следующим образом:
html {
overflow-y: scroll;
}
Вот метод. Это не только предоставит контейнер полосы прокрутки, но также покажет полосу прокрутки, даже если содержимого недостаточно (согласно вашему требованию). Также будет работать на 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; скрывает горизонтальную полосу прокрутки. В то время как overflow-y: scroll; позволяет прокручивать по вертикали.
<!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>
Я делал это следующим образом:
.element {
overflow-y: visible;
}
До боли просто, я знаю...
overflow-xиoverflow-xдоставили мне некоторые неприятности в прошлом. 29.10.2010!important, чтобы модальные окна Bootstrap, которые я использую, не скрывали полосу прокрутки. 10.04.2015