javascript - sola - scroll se mueve solo

¿Cómo puedo desactivar una barra de desplazamiento de navegador o elemento, pero aún así permitir el desplazamiento con la rueda o las teclas de flecha? (7)

Quiero ocultar cualquier barra de desplazamiento de mis elementos div y todo mi body , pero aún así permitir que el usuario se desplace con la rueda del mouse o las teclas de flecha. ¿Cómo se puede lograr esto con JavaScript sin procesar o jQuery? ¿Algunas ideas?

¿Qué tal una solución puramente CSS? He probado esto y funciona bien. Sin embargo, recomendaría la Solución 3 ya que no es hacky, es compatible con todos los navegadores con JS y es muy simple.

Solución 1 (cross browser pero más hacky)

#div { position: fixed; right: -20px; left: 20px; background-color: black; color: white; height: 5em; overflow-y: scroll; overflow-x: hidden; }

<html> <body> <div id="div"> Scrolling div with hidden scrollbars! On overflow, this div will scroll with the mousewheel but scrollbars won''t be visible. Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable Scrollable </div> </body> </html>

Solución 2 (solo IE y Chrome)

Simplemente agregue la clase nobars a cualquier elemento en el que quiera ocultar las barras de desplazamiento.

El overflow: -moz-scrollbars-none Firefox overflow: -moz-scrollbars-none es, según MDN , obsoleto. Solía funcionar, pero ahora oculta el desbordamiento y desactiva el desplazamiento si se usa.

.nobars { /* Firefox: https://developer.mozilla.org/en/docs/Web/CSS/overflow */ /* overflow: -moz-scrollbars-none; (no longer works) */ /* IE: https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx */ -ms-overflow-style: none; } .nobars::-webkit-scrollbar { /* Chrome: https://css-tricks.com/custom-scrollbars-in-webkit/ */ display: none; }

Solución 3 (navegador cruzado javascript)

Perfect Scrollbar no requiere jQuery (aunque puede utilizar jQuery si está instalado) y tiene una demostración disponible aquí . Los componentes se pueden diseñar con CSS, como en el siguiente ejemplo:

.ps-scrollbar-y-rail { display: none !important; }

Aquí hay un ejemplo completo que incluye la implementación de Perfect Scrollbar:

Al igual que las respuestas anteriores, usaría el overflow:hidden para deshabilitar las barras de desplazamiento en el cuerpo / div.

Luego vincularía el evento mousewheel a una función que cambiaría el scrollTop del div para emular el desplazamiento.

Para las teclas de flecha, debe vincular el evento de selección para reconocer una tecla de flecha, y luego cambiar scrollTop y scrollLeft de div como corresponda para emular el desplazamiento. (Nota: utiliza el uso de la keydown lugar de keydown keypress ya que IE no reconoce la keypress para las teclas de flecha).
Editar: No pude obtener FF / Chrome para reconocer keydown en un div, pero funciona en IE8. Dependiendo de para qué necesitó esto, puede configurar un oyente keydown en el document para desplazar el div. (Consulte la referencia de KeyCode como ejemplo).

Por ejemplo, desplazarse con la rueda del mouse (usando jQuery y un complemento mousewheel):

<div id="example" style="width:300px;height:200px;overflow:hidden"> insert enough text to overflow div here </div> <script> $("#example").bind("mousewheel",function(ev, delta) { var scrollTop = $(this).scrollTop(); $(this).scrollTop(scrollTop-Math.round(delta)); }); </script>

(Esta es una maqueta rápida, tendrías que ajustar los números ya que para mí, esto se desplaza un poco lentamente.)

referencia de clave de código
plugin mousewheel
keydown, keypress @ quirksmode

Actualización 19/12/2012:

La ubicación actualizada del complemento mousewheel está en:

Bueno, tal vez no sea el más intuitivo en mi opinión, pero puedo imaginar que puedas convertirlo en una experiencia decente, pruébalo.

overflow:hidden;

asegúrese de que el objeto principal tenga height y width , y se muestre como block

Como dijo Baldráni arriba

::-webkit-scrollbar { display: none; }

O puedes hacer

::-webkit-scrollbar{ width: 0px; }

(publicado para otras personas que tropiezan con esto de la búsqueda en Google!)

No tienes que usar jquery o js para hacer esto. Es más eficiente con simple webkit.

Simplemente agregue el código a continuación a su archivo css.

::-webkit-scrollbar { display: none; }

Precaución ! Esto deshabilitará toda la barra de desplazamiento, así que asegúrate de ponerlo en una clase o id específico si solo quieres que se oculte uno.

Para que esto funcione para mí, utilicé este CSS:

html { overflow-y: hidden; }

Pero tuve problemas para usar $(this).scrollTop() , así que me vinculé a mi #id, pero ajusté el scrollTop de la ventana. Además, mi mouse de desplazamiento suave disparaba muchos deltas 1 o -1, así que lo multipliqué por 20.

$("#example").bind("mousewheel", function (ev, delta) { var scrollTop = $(window).scrollTop(); $(window).scrollTop(scrollTop - Math.round(delta * 20)); });

Prefiero la respuesta de SamGoody a un duplicado de esta pregunta. Deja intactos los efectos de desplazamiento nativos, en lugar de intentar volver a implementarlos manualmente para algunos dispositivos de entrada particulares:

Una solución mejor es establecer el destino de div para desbordamiento: desplazarse, y envolverlo dentro de un segundo elemento que es 8px más angosto, que está desbordado: oculto.

Vea el comentario original para un ejemplo desarrollado. Es posible que desee utilizar JavaScript para determinar el tamaño real de las barras de desplazamiento en lugar de asumir que siempre tienen 8 píxeles de ancho como lo hace su ejemplo.