javascript - personalizar - ocultar scrollbar css

Eliminar la barra de desplazamiento pero no la funcionalidad de desplazamiento

Question

Esta pregunta ya tiene una respuesta aquí:

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

Sé que puedes definir desbordamiento: oculto; en el cuerpo del HTML para eliminar la barra de desplazamiento, pero me gustaría poder desplazarme con las flechas o la rueda de desplazamiento del mouse.

Gracias de antemano por cualquier ayuda.

Edición: Gracias por todos los consejos sobre las barras de desplazamiento flotantes y las barras personalizadas. También le agradecemos por todas las inquietudes sobre la experiencia de los usuarios que impactan al eliminar las barras de desplazamiento. Voy a elaborar un poco más para que explique de dónde vengo.

Tengo una página circular (si se desplaza con una rueda de desplazamiento o un botón de flecha, cuando llega al final, se restablece en la parte superior de la página y comienza de nuevo). Un bucle sin fin. Una barra de desplazamiento tiene un impacto en esto, ya que la barra es limitada y cuando alcanza la parte inferior y se restablece en la parte superior, el mouse del usuario aún se encuentra en la parte inferior de la página, lo que significa que cuando se mueven hay un parpadeo entre la parte superior e inferior de la página.

Planeo quitar la barra de desplazamiento y reemplazarla con botones de flecha en la parte superior e inferior de la ventana. Por eso me gustaría eliminar la barra de desplazamiento completamente, pero dejar la funcionalidad de desplazamiento.

Answer 1

Hay una biblioteca para jQuery llamada jscrollpane http://jscrollpane.kelvinluck.com/#examples que puede modificar mucho.

Pero si solo desea ocultar la barra, también puede empujar esta barra de desplazamiento fuera de la vista: http://jsfiddle.net/H27BK/

<div id="content">
<div id="scrollable"> ... ... ... </div>
</div>

con CSS

#content {
position: relative;
width: 200px;
height: 150px;
border: 1px solid black;
overflow: hidden;
}
#scrollable {
height: 150px;
width: 218px; /* #content.width + 18px */
overflow-y: scroll;
}

Todo esto basado en un ancho de barra de 18 píxeles.

Así que podemos hacer algunas secuencias de comandos de detección de ancho de la barra de desplazamiento de javascript o simplemente agregar otro div que pongamos frente al div desplazable.

http://jsfiddle.net/uNzEz/

HTML es ahora:

<div id="content">
<div id="scrollable">
<div id="txt"> ... ... ...
</div></div></div>

con CSS como:

#content {
position: relative;
width: 200px;
height: 150px;
border: 1px solid black;
overflow: hidden;
}
#scrollable {
height: 150px;
width: 240px; /* the bar-width can be theoretical 240px - 200px = 40px */
overflow-y: scroll;
}
#txt {
width: 200px;
}

Al aire libre

Answer 2

Ok, nueva respuesta. Acabo de desarrollar un pequeño truco para hacerlo, mezclado con jQuery.

Crea una envoltura div dentro del cuerpo, con el siguiente css.

body { overflow: hidden; }
#wrapper { overflow: auto; }

Entonces, simplemente establece sus respectivas alturas:

$("body").height($(window).height());
$("#wrapper").height($("#text").height());

Demo

Para soporte de tamaños

$(window).trigger(''scroll'');
$(window).scroll(function() {
$("body").height($(window).height());
$("#wrapper").height($("#text").height());
});

Demo

Answer 3

Puedes intentar usar uno de los complementos de la barra de desplazamiento de jQuery, permiten el diseño personalizado de css ...

Simplemente puede elegir diseñar su barra de desplazamiento para que sea invisible, pero la funcionalidad del mouse permanecerá ...

Mi favorito personal es malihu''s , solo asegúrate de usar su extensión de rueda del ratón.

EDITAR:

Quizás después de ver cómo se ven las barras de desplazamiento diseñadas a medida, puedes replantearte mostrando barras de desplazamiento. Después de todo, son útiles e instructivos.