カスタムスクロールバーを作成する方法は？

-1

画像のように見えるカスタムスクロールバーを作成するためのCSSを知ってもらえますか？背景は透明でなければならず、私は今のところ緑の背景に置いています。カスタムスクロールバーを作成する方法は？

2012-02-15 Beginner

何を試しましたか？ CSS専用のスクロールバーは、WebKitでのみ使用できます。また、なぜこのような大きな画像を投稿する必要があると感じましたか？ –

Googleをお試しください。私たちは採用するコーダーではありません。 – Iznogood

可能な複製http://stackoverflow.com/questions/1756281/how-to-make-a-custom-scroll-bar-with-css、http://stackoverflow.com/questions/3510741/to-change-スクロールバーのスタイリング。 – Zeta

あなたは、この使用してjQueryのプラグインにJScrollPaneを行うことができます - セットとhttp://jscrollpane.kelvinluck.com/

$(function() { 
    $('.scroll-pane').jScrollPane(); 
});

上記のコードに "スクロール・ペインの" クラスでdiv要素をスクロールします。あなたは、標準のCSSとしていますが、できるCSS3で行うことはできません

：

pre::-webkit-scrollbar { 
    height: 1.5ex; 
    -webkit-border-radius: 1ex; 
    } 

pre::-webkit-scrollbar-thumb { 
    border-top: 1px solid #fff; 
    background: #ccc -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(240, 240, 240)), to(rgb(210, 210, 210))); 
     -webkit-border-radius: 1ex; 
     -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 
}

注：これはのみのWebKitブラウザ上で動作します。

出典

2012-02-15 12:59:42 SpaceBeers

カスタムスクロールバーを作成する方法は？

答えて

関連する問題