HTML/CSS - スクロールバーを変更しますか？

Question

私は、スクロールバーを変更したいフォーラムを実行します。私はそれが次のようになりたいのですが：

そして、私はここのためにHTMLを置くために知っておく必要があります。

私はそれがoverall_header.html（http://prntscr.com/brvnvj）にあると思います 私はCSSがここに行くと仮定していますか？ （http://prntscr.com/brvo2b）

私は完全なnoobです、助けてください。

Answer 1

は、ヘッド部にこのスタイルを追加することができ、次のいずれか

あなたがで色を変更することができますrgba（0,0,0,0.3）の値を変更します。

<style type="text/css"> 
    ::-webkit-scrollbar { 
    width: 12px; 
} 

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 
    </style> 

Answer 2

CSSを使用して既存のブラウザのUI要素をスタイル設定することはできません。 （Thankfully！これらの虹色のスクロールバーと90年代の終わりを覚えていましたか？）

しかし、独自のスクロールバーを作成するために、いくつかのJS-プラグインを使用することができます。しかし、ユーザーが "通常の"スクロールを使用できることを確認してください。これは、スクロールバーをドラッグ可能にする必要があるだけでなく、マウスホイール、上矢印と下矢印、またはページアップキーやページダウンキーを使用してコンテンツをスクロールする必要があることを意味します。スペースバーはページの末尾に移動する必要があります。実際には、ブラウザがすでに実装しているすべてのものを提供する必要があります。

このようなタスクのための既存のJSプラグインは、すでにWeb上に多数あります。

Answer 3

これは、あなたが望むものを達成するのを助ける必要があります。

//the color of the scrollbar 
body::-webkit-scrollbar { 
    background-color: darkgrey; 
} 


//the color of the thumb of the scrollbar 
body::-webkit-scrollbar-thumb { 
    background-color: blue; 
} 

注このCSSのトリックは、クロスブラウザの互換性がないこと。 コードを追加する場所についての質問についても。あなたは、外部ファイルに入れてヘッダにそれを読み込むか、単にコードを経由してどこかにあなたのbodyタグ内のコードを追加します...