[英]Custom scrollbar only in one div
我想在 Chrome 中有一个自定义滚动条。
所以,我正在使用这个 sass:
::-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);
}
}
我的问题是我只希望在特定的 div 中使用这种滚动条样式。 但如果我这样做:
#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);
}
}
}
不管用。 有任何想法吗?
#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);
}
}
}
如果是为一个班级做的话,可以通过以下方式进行。 侧边栏是指定给要允许滚动的 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;
}
现在是 2020 年,Firefox 仍然不支持::-webkit-scrollbar
。 除了overflow:auto
在 Chrome 和 Safari 中内容溢出时显示滚动条,但在 Firefox 中,在我们开始滚动之前将看不到滚动条。 去猜测内容是否可滚动。 与overflow:scroll
相同。 不是很直观。
好吧,2022 年仍然没有支持 Firefox:
https://caniuse.com/?search=%3A%3A-webkit-scrollbar
不过基础可以在Firefox定制:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scrollbars
https://caniuse.com/?search=scrollbar-color
/* Chrome */
.container::-webkit-scrollbar {
width: 5px;
}
.container::-webkit-scrollbar-track {
/*background-color: grey;*/
box-shadow: inset 0 0 5px grey;
border-radius: 15px;
}
.container::-webkit-scrollbar-thumb {
background-color: orange;
border-radius: 15px;
/*border: 1px solid red;*/
}
/*.container::-webkit-scrollbar-button {
background-color: red;
border-radius: 15px;
}*/
.container::-webkit-scrollbar-thumb:hover {
background: red;
}
/* IE */
.container {
scrollbar-face-color: orange;
scrollbar-shadow-color: grey;
scrollbar-highlight-color: red;
}
/* FireFox */
.container {
scrollbar-color: orange grey;
scrollbar-width: thin;
}
/* View Scrollbar */
.container {
overflow-y: scroll;
overflow-x: hidden;
width:400px;
height: 200px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.