benutzerdefinierte Bildlaufleiste ohne Jquery

Question

Ich bin auf der Suche nach einer benutzerdefinierten Bildlaufleiste, die ohne Jquery funktioniert. Ich kann jquery nicht benutzen, weil das andere Zeug auch jqueryless ist und es für schnelles Laden optimiert ist.

Wäre dankbar für irgendwelche Ideen mit mir geteilt.

NONNNNN

Answer 1

Wenn Sie nicht wollen, jQuery verwenden Sie immer CSS versuchen könnte (funktioniert nur in WebKit).

JSFIDDLE

Beispiel CSS:

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

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    background-color: #000000; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    background-color: #555555; 
} 

::-webkit-scrollbar-button { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    background-color: #000000; 
    background-image: url(dark/light-blue/images/ui-icons_0990fb_256x240.png); 
} 

::-webkit-scrollbar-button:vertical:increment { 
    background-position: -64px -16px; 
} 

::-webkit-scrollbar-button:vertical:decrement { 
    background-position: 0 -16px; 
} 

::-webkit-scrollbar-button:horizontal:increment { 
    background-position: -32px -16px; 
} 

::-webkit-scrollbar-button:horizontal:decrement { 
    background-position: -96px -16px; 
} 

::-webkit-scrollbar-corner { 
    background-color: #000000; 
} 

More on WebKit Custom Scrollbars

Wenn Sie mehrere Browser-Unterstützung wollen Sie wollen jQuery verwenden oder eigene schreiben JavaScript-Code mit ein div für das Anfügen Bildlaufleiste und Hinzufügen von Ereignishandlern zu wissen, wenn Sie blättern.

Example of Custom Scrollbar Code

Answer 2

Ok, für Völker, die auch ohne Abhängigkeiten für eine schöne Scrollbar suchen:

Sie können IScroll verwenden, wenn Sie ein bisschen mehr als nur eine Scrollbar benötigen oder die Gemini Scrollbar, die absolut erstaunlich ist und verwendet natives Scrollverhalten.