jqueryのないカスタムスクロールバー

Question

jqueryなしで動作するカスタムスクロールバーを探しています。他のものもjquerylessであり、高速読み込みに最適化されているのでjqueryを使用できません。

私に共有されているアイデアに感謝します。

NONNNNN

Answer 1

あなたはjQueryのを使用したくない場合は、必ず（のみのWebKitで動作）CSSを試みることができます。

JSFIDDLE

例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

あなたが複数のブラウザをサポートしたい場合は、jQueryのを使用したりするためにdiv要素を追加して、独自のカスタムのjavascriptのコードを記述したいと思いますイベントハンドラを追加して、スクロールするタイミングを知ることができます。

Example of Custom Scrollbar Code

Answer 2

[OK]を、依存関係なしに素敵なスクロールバーのためにも探している人々のために：あなたは絶対に素晴らしいですただ、スクロールバーやGemini Scrollbar、よりも少しを必要とする場合

あなたはIScrollを使用することができますネイティブのスクロール動作を使用します。