Desplazable pero sin barra de desplazamiento

Question

¿Cómo puedo permitir que un objeto DOM como div pueda desplazarse con la rueda de desplazamiento del mouse o con las teclas de flecha (como overflow:scroll), pero no mostrar la barra de desplazamiento (como overflow:hidden)?

Answer 1

Puede establecer bind un detector de eventos para scrolldown/scrollup (a través del evento mousewheel, mirando event.wheelDelta al tamaño de cálculo y directino of scroll) y colocar manualmente un div absoluto colocado dentro de otro div de altura fija absolutamente/relativamente posicionado . Por lo tanto, al desplazarse hacia abajo, disminuye la posición y del divisor interno, y al desplazarse hacia arriba, aumenta la posición y.

En el caso de las teclas de flecha, solo debe vincular una función similar a la comprobación de eventos de tecla para la flecha hacia abajo/hacia arriba, según corresponda.

hice un jsFiddle exampling esta técnica aquí: http://jsfiddle.net/wsmithrill/U7ju8/32/

Answer 2

Si desea omitir por completo Javascript, puede intentar lo que sugerí here.

Básicamente, tenga un contenedor div que sea un poco más estrecho que su div de contenido. Hacer que el contenedor se desborde: oculto, pero el div de contenido configurado como desbordamiento: desplazarse. Si el contenedor es más estrecho, ocultará la barra de desplazamiento.

Answer 3

si puede necesitar esto para dejar de desplazarse hacia abajo cuando llegue a la parte superior:

var top_val = $("#inner").css("top"); 
if (top_val.indexOf("-") > -1) 
{ 
    $("#inner").css("top", parseInt($("#inner").css("top"), 10) + 5 + "px"); 
}