3

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

这是否可以在没有 java 脚本和 j 查询的情况下使用 html 和 css

提前致谢

4

3 回答 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); 
}
于 2013-09-18T11:56:28.900 回答
0

在某些浏览器中可能只有 CSS 宽度。

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

否则你有使用 javascript。

于 2013-09-18T11:53:56.330 回答
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>

于 2016-09-06T07:08:30.047 回答