¿Cómo mostrar siempre la barra de desplazamiento vertical en un navegador?

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.¿Cómo mostrar siempre la barra de desplazamiento vertical en un navegador?

gracias.

Fuente

2010-10-29 gautamlakum

tienes que pedir estas cosas para aprender. – Rimian

Posible duplicado de [Hacer que la barra de desplazamiento principal siempre esté visible] (https://stackoverflow.com/questions/1202425/making-the-main-scrollbar-always-visible) – Bae

jQuery no debería ser requerido. Puede intentar agregar el CSS:

body {overflow-y:scroll;}

Esto funciona con los últimos navegadores, incluso IE6.

Fuente

2010-10-29 08:07:52

Creo que el 'overflow-x' y' overflow- x' me han dado algunos dolores en el pasado. –

Creo que esto mostrará la barra de desplazamiento solo cuando haya desbordamiento. Para mostrar la barra de desplazamiento siempre intente cuerpo { overflow-y: scroll; altura: 101%; } –

Tiene esta ronda de la manera incorrecta. Si configura el desbordamiento: automático, las barras de desplazamiento aparecerán si es necesario. desbordamiento: el desplazamiento siempre muestra las barras de desplazamiento. Si el contenido no es lo suficientemente largo, las barras de desplazamiento aparecen atenuadas. –

Simplemente use CSS.

body { 
    overflow-y: scroll; 
}

Fuente

2010-10-29 08:11:01

Tenga en cuenta que OP busca mostrar solo la barra de desplazamiento * vertical *. La propiedad 'overflow' en este caso significa que también se mostrará la barra de desplazamiento horizontal. Deberías usar 'overflow-y' en su lugar. – Boaz

@rogerdpack De hecho, hace 3 años; 4 horas después del comentario original :) – Boaz

establezca la overflow property de un que contiene div a scroll.

Fuente

2010-10-29 08:11:46 jambox

intente llamar a una función en el método de carga de su etiqueta de cuerpo y en esa función cambie el estilo de cuerpo como este document.body.style.overflow = 'scroll'; También es posible que necesite ajustar la anchura de su html ya que esto mostrará barras de desplazamiento horizontal, así

su archivo html se verá algo como esto

<script language="javascript"> 
    function showscroll() { 
     document.body.style.overflow = 'scroll'; 
    } 
</script> 
</head> 
<body onload="showscroll()">

Fuente

2010-10-29 08:18:17 megha

Bueno, OP pidió una solución de Javascript, pero eso no significa que eso es lo que necesita. Esta es una muy mala solución para cambiar un estilo. Esto es lo que CSS es para: hojas de ** estilo ** en cascada. En CSS es solo una línea, como muestra la respuesta aceptada. – stevenvh

Aquí es 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, así ..

<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>

Fuente

2012-07-30 21:54:01

Sólo una nota: En OS X Lion, desbordamiento ajustado en "scroll" se comporta más como automóviles en las barras de desplazamiento que sólo mostrará cuando se esté usando . 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 necesita 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); 
}

Puede estilo en consecuencia.

Fuente

2015-07-07 20:15:57 molls223

Agregue la clase al div que desea que sea desplazable.

overflow-x: hidden; oculta la barra de desplazamiento horizantal. Mientras 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>

Fuente

2017-06-09 08:37:31

Si bien este código puede responder a la pregunta, proporcionar un contexto adicional sobre cómo y/o por qué resuelve el problema mejoraría el valor a largo plazo de la respuesta. – Badacadabra

Utilice el enlace [editar] para explicar cómo funciona este código y no solo proporcione el código, ya que una explicación es más probable que ayude a los lectores futuros. Ver también [respuesta]. [fuente] (http://stackoverflow.com/users/5244995) –

Explicación agregada. –

¿Cómo mostrar siempre la barra de desplazamiento vertical en un navegador?

Respuesta

Cuestiones relacionadas