html - not - show vertical scroll
¿Cómo mostrar siempre la barra de desplazamiento vertical en un navegador? (7)
Quiero mostrar siempre la barra de desplazamiento vertical en mi página web. ¿Es posible usar javascript? Creo que es posible usar javascript o jQuery. Quiero barra de desplazamiento vertical si hay suficiente contenido para mostrar o no.
Gracias.
Agregue la clase al div que desea que sea desplazable.
overflow-x: oculto; oculta la barra de desplazamiento horizantal. While overflow-y: scroll; le permite desplazarse verticalmente.
<!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>
Aquí hay un método. Esto no solo proporcionará el contenedor de la barra de desplazamiento, sino que también mostrará la barra de desplazamiento incluso si el contenido no es suficiente (según su requisito). También funcionaría en Iphone y dispositivos Android también ..
<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>
Solo usa CSS.
body {
overflow-y: scroll;
}
intente llamar a una función en el método onload de su etiqueta corporal y en esa función cambie el estilo del cuerpo como este document.body.style.overflow = ''scroll''; también es posible que necesite establecer el ancho de su html, ya que esto también mostrará barras de desplazamiento horizontal
su archivo html se verá algo así
<script language="javascript">
function showscroll() {
document.body.style.overflow = ''scroll'';
}
</script>
</head>
<body onload="showscroll()">
jQuery no debería ser requerido. Podría intentar agregar el CSS:
body {overflow-y:scroll;}
Esto funciona con los últimos navegadores, incluso IE6.
Solo una nota: en OS X Lion, el desbordamiento configurado para "desplazarse" se comporta más como automático, ya que las barras de desplazamiento solo se mostrarán cuando se usen. Desaparecerán cuando no estén en uso. Entonces, si las soluciones anteriores no parecen funcionar, esa podría ser la razón.
Esto es lo que necesitarás para solucionarlo:
::-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);
}
Puedes darle un estilo acorde.