我想在Chrome中使用自定义滚动条。
所以,我正在使用这个sass:
body {
text-align:center;
background:url(dark-gradient-tumblr-wallpaper-1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
h1 {color:white;
font-family:arial;
font-weight:bold;
line-height:150%;
}
table {
margin:0 auto;
width:300px; /* or whatever width you want */
font-style:italic;
}
p {
text-indent:25px;
text-align:center;
color:grey
}
我的问题是我只想在特定div中使用此滚动条样式。但如果我这样做:
::-webkit-scrollbar {
width: 0.5em;
height: 0.5em;
}
::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,.1);
border-radius: 3px;
&:hover {
background: rgba(255,255,255,.2);
}
}
无效。有什么想法吗?
答案 0 :(得分:12)
#boardslist {
&::-webkit-scrollbar {
width: 0.5em;
height: 0.5em;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,.1);
border-radius: 3px;
&:hover {
background: rgba(255,255,255,.2);
}
}
}
答案 1 :(得分:0)
如果您正在上课,可以按照以下方式进行。侧边栏是给您要允许滚动的div的类。
.side_bar{
padding-right: 20px;
margin-left: -12px;
position: sticky;
top: 0;
height: 100vh;
overflow-y: scroll;
/* width */
}
.side_bar::-webkit-scrollbar {
width: 5px;
}
/* Track */
.side_bar::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px grey;
border-radius: 10px;
}
/* Handle */
.side_bar::-webkit-scrollbar-thumb {
background: rgb(7, 7, 7);
border-radius: 10px;
}
/* Handle on hover */
.side_bar::-webkit-scrollbar-thumb:hover {
background: #009eb3;
}
答案 2 :(得分:0)
现在是2020年,Firefox仍不支持::-webkit-scrollbar
。
当内容在Chrome和Safari中溢出时,overflow:auto
还会显示滚动条,但是在Firefox中,直到我们开始滚动时,才会显示可见的滚动条。去猜测内容是否可滚动。与overflow:scroll
相同。不是很直观。