niestandardowy pasek przewijania bez jquery

Question

Szukam niestandardowego paska przewijania, który działa bez jquery. Nie mogę używać jquery, ponieważ inne rzeczy są również jockeyyless i są zoptymalizowane do szybkiego ładowania.

Byłbym wdzięczny za wszelkie pomysły udostępnione mi.

NONNNNN

Answer 1

Jeśli nie chcesz używać jQuery zawsze można próbować CSS (działa tylko w WebKit).

JSFIDDLE

Przykład 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

Jeśli chcesz obsługę wielu przeglądarki będziemy chcieli użyć jQuery lub napisać swój własny kod JavaScript z dołączanie div dla pasek przewijania i dodawanie modułów obsługi zdarzeń, aby wiedzieć, kiedy przewijasz.

Example of Custom Scrollbar Code

Answer 2

Ok, dla ludzi, którzy poszukują również za miły przewijania bez zależności:

Można użyć IScroll jeśli potrzebujesz nieco więcej niż tylko przewijania lub Gemini Scrollbar, który jest absolutnie niesamowite i wykorzystuje natywne zachowanie przewijania.