Visualizzazione barra di scorrimento personalizzata con HTML/CSS/JavaScript

Question

Sto creando un'applicazione altamente specializzata in cui voglio sperimentare una barra di scorrimento personalizzata.

Idealmente, disabilitare la barra di scorrimento incorporata e disegnare la mia. La pagina apparirebbe come qualsiasi altra pagina, solo che la barra di scorrimento non sarebbe visibile. I tasti freccia, la rotella di scorrimento e qualsiasi altro mezzo di scorrimento della pagina, dovrebbero funzionare come eccetto sulla piattaforma su cui gira la mia webapp.

Un modo sarebbe quello di mettere il contenuto in un div wrapper che viene posizionato in modo assoluto, con top: 0; bottom: 0; width: 100%; overflow: hidden; Con questo approccio, avrei dovuto re-implementare lo scorrimento me stesso, con l'ascolto di tastiera e scorrere gli eventi delle ruote. Questo non è l'ideale, specialmente il comportamento di page up e page down sarebbe difficile da replicare. Quanti pixel devo scorrere su una pagina in basso? Il numero varia da piattaforma a piattaforma. Credo che le pergamene magiche "acceleranti" siano difficili da replicare.

Quali sono le opzioni disponibili per l'implementazione di questa visualizzazione personalizzata della barra di scorrimento?

Nota: Sono a conoscenza della ricerca che è stata eseguita sulle barre di scorrimento e sull'usabilità. Non è necessario indicarlo, ne sono dolorosamente consapevole :) Non sto parlando solo della colorazione della barra di scorrimento. Pensaci più in termini di un editor di film o di un sequencer musicale. È molto personalizzato e roba specializzata.

Aggiornamento:http://augustl.com/blog/2010/custom_scroll_bar_native_behaviour

Answer 1

Ecco una possibile soluzione che utilizza JavaScript e CSS. L'idea non è rimuovere la barra di scorrimento ma semplicemente nasconderlo e lasciare che continui a farlo funzionare.

Concetto:

Qui la barra di scorrimento del contenuto effettivo viene spinto al di fuori l'involucro. Ciò impedisce di essere visto (il wrapper ha overflow:hidden;) ma non gli impedisce di funzionare.

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

Implementazione:

Il markup:

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

e lo script (ho usato jQuery, ma potrebbe facilmente essere riscritto in puro JavaScript.):

$(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) + "%!"); 
    }); 
}); 

And here it is working (anche se non ho un'abitudine display della barra di scorrimento).

Answer 2

Credo che dal momento che questo è cosa altamente specializzato, non c'è bisogno di parlare di usabilità :-)

L'unica cosa di cui sono a conoscenza di è quello di implementare il proprio evento capture - basato su keypress, mousedown ecc. - Dovrebbe essere facile ottenere la posizione corrente della pagina (tipo di virtual - perché avrai tutto caricato e cambierà solo la "vista" personalizzata).

Consiglio vivamente il check tutorial grande Quirksmode e documenti:

• eventi di pressione: http://www.quirksmode.org/js/keys.html

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

io non sono sicuro di rotella di scorrimento, anche se - Non ho sentito parlare della tecnica per emularlo, ma sicuramente saresti in grado di trovare o codificare qualcosa.

EDIT: ho trovato un po 'di implementazione JS basso livello di rotella di scorrimento (ghiera cliccabile): http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel