personalizado - Visualización de barra de desplazamiento personalizada con HTML/CSS/JavaScript

scroll personalizado

Question

Estoy creando una aplicación altamente especializada en la que quiero experimentar con una barra de desplazamiento personalizada.

Idealmente, desactivaría la barra de desplazamiento incorporada y dibujaría la mía propia. La página se vería y se sentiría como cualquier otra página, solo que la barra de desplazamiento no sería visible. Las teclas de flecha, la rueda de desplazamiento y cualquier otro medio para desplazarse por la página deberían funcionar como excepciones en la plataforma en la que se ejecuta mi aplicación web.

Una forma sería poner el contenido en un div envoltorio que esté absolutamente posicionado, con la top: 0; bottom: 0; width: 100%; overflow: hidden; top: 0; bottom: 0; width: 100%; overflow: hidden; Con este enfoque, tendría que volver a implementar el desplazamiento, escuchando los eventos de teclado y rueda de desplazamiento. Esto no es ideal, especialmente el comportamiento de página arriba y de página abajo sería difícil de replicar. ¿Cuántos píxeles debo desplazar en una página hacia abajo? El número varía de una plataforma a otra. Creo que los rollos mágicos de "aceleración" del ratón también serían difíciles de replicar.

¿Cuáles son mis opciones para implementar esta visualización personalizada de la barra de desplazamiento?

Nota: Estoy al tanto de la investigación que se ha realizado sobre barras de desplazamiento personalizadas y usabilidad. No necesita señalar esto, estoy muy consciente de esto :) No estoy hablando solo de volver a colorear la barra de desplazamiento. Piénselo más en términos de un editor de películas o un secuenciador de música. Es muy personalizado y especializado.

Actualización: http://augustl.com/blog/2010/custom_scroll_bar_native_behaviour

Answer 1

Supongo que ya que esto es algo altamente especializado, no hay necesidad de hablar de usabilidad :-)

De lo único que soy consciente es de implementar tu propia captura de eventos (basada en pulsaciones de teclas, mousedown, etc.), debería ser fácil obtener la posición actual de la página (tipo de virtual) porque tendrás todo cargado y simplemente cambiarás la configuración personalizada. "ventana gráfica").

Recomiendo consultar los excelentes tutoriales y documentos de QuirksMode:

• Eventos de pulsación de teclas: http://www.quirksmode.org/js/keys.html

• Eventos del mouse: http://www.quirksmode.org/js/events_mouse.html

Aunque no estoy seguro acerca de la rueda de desplazamiento, no he escuchado acerca de la técnica para emular eso, pero seguramente usted podría encontrar o codificar algo.

EDITAR: He encontrado una implementación JS de bajo nivel de la rueda de desplazamiento (rueda de clic): http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel

Answer 2

Aquí hay una solución potencial usando javascript y css. La idea no es eliminar la barra de desplazamiento sino simplemente ocultarla y dejar que siga haciendo su trabajo.

Concepto:

Aquí la barra de desplazamiento del contenido real se empuja fuera del contenedor. Esto evita que se vea (el contenedor tiene overflow:hidden; ) pero no impide que funcione.

|---------WRAPPER-----------| ||--------CONTENT-----------|---| || |[^]| || |[0]| || |[0]| || |[ ]| || |[ ]| || |[v]| ||--------------------------|---| |---------------------------|

Implementación:

El marcado:

<div class="wrapper">
  <div class="content">
    <p>1Hello World</p>
    <p>2Hello World</p>
    ...
  </div>
</div>

Y el script (he usado jquery, pero podría reescribirse fácilmente en javascript puro):

$(function() {
  // initialize: both need to have the same height and width (width default: 100%)
  // these could go on your stylesheet of course.
  $("div.wrapper").css({ height: "200px", overflow: "hidden" });
  $("div.content").css({ height: "200px", overflow: "auto" }); 

  // now extend the content width beyond the wrapper
  $("div.content").width($("div.content").width() + 22); // 22px is the width of IE scrollbars

  // prevent highlight dragging from scrolling the wrapper div (thereby displaying the bars)
  $("div.wrapper").scroll(function() {
    this.scrollLeft = 0;
    this.scrollTop = 0;
  });

  $("div.content").scroll(function() {
    // update custom scrollbar display using this.scrollTop as a percentage of this.clientHeight
    // alert("Place slider at " + ((100 * this.scrollTop) / this.clientHeight) + "%!");
  });
});

Y aquí está funcionando (aunque no tengo una pantalla de barra de desplazamiento personalizada).