logo标签列表

如何使用HTML和CSS自定义滚动条

htmlcss
3

如何将默认滚动条样式更改为自定义滚动条，

是否可以使用HTML和CSS而无需JavaScript和jQuery来完成此操作

提前感谢您的帮助

3个回答
9

你可以更改颜色，但目前只能在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); 
}
0

简单示例

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>

1
你应该为你的编码添加一些解释。 - Fidel90
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接