html - HTMLとCSSでスクロールバーをカスタマイズする方法

Question

デフォルトのスクロール バー スタイルをカスタマイズされたスクロール バーに変更する方法

javaスクリプトとjクエリなしでhtmlとcssでこれを行うことは可能ですか

前もって感謝します

Answer 1

色を変更できますが、現在のところ Webkit ブラウザーでのみ機能します。

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

/* Track */
::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);*/ 
    -webkit-border-radius: 10px;
    background-color:#fff;
    border-radius: 10px;
}

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

Answer 2

簡単な例

html {
    overflow: auto;
}
body {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 30px; 
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
 background: rgba(255,0,0,0.4); 

<p>
During Roman times,
  there were many variant forms of the letter "A".
  First was the monumental or lapidary style, which was used when inscribing on stone or other "permanent" mediums.
  There was also a cursive style used for everyday or utilitarian writing,
  which was done on more perishable surfaces.
  Due to the "perishable" nature of these surfaces, 
  there as not as many examples of this style as there are of the monumental, but there are still many surviving examples of different types of cursive, such as majuscule cursive,
  minuscule cursive, and semicursive minuscule. 
  Variants also existed that were intermediate between the monumental and cursive styles. The known variants include the early semi-uncial,
  the uncial, and the later semi-uncial.[5]
</p>
<p>
 During Roman times, there were many variant forms of the letter "A". First was the monumental or lapidary style, which was used when inscribing on stone or other "permanent" mediums. There was also a cursive style used for everyday or utilitarian writing, which was done on more perishable surfaces. Due to the "perishable" nature of these surfaces, there as not as many examples of this style as there are of the monumental, but there are still many surviving examples of different types of cursive, such as majuscule cursive, minuscule cursive, and semicursive minuscule. Variants also existed that were intermediate between the monumental and cursive styles. The known variants include the early semi-uncial, the uncial, and the later semi-uncial.[5]</p>

Answer 3

一部のブラウザーでは幅のみの CSS で可能です。

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-styling-scrollbars-to-match-your-ui-design/

それ以外の場合は、javascript を使用しています。