标题可能描述了整个问题。 我有两个div,我想以不同的方式设置它们的样式。
e.g:
#div1{
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: blue;
}
}
#div2{
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: red;
}
}
有谁知道这是否可能。我尝试过,但它没有用。它仅在我为整个网站设置时才有效。
非常感谢任何帮助。
答案 0 :(得分:1)
试试这个
.scrollbar {
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow {
min-height: 450px;
}
#wrapper {
text-align: center;
width: 500px;
margin: auto;
}
#style-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
#style-2::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
#style-3::-webkit-scrollbar-trac {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar-thumb {
background-color: #000000;
}
<div id="wrapper">
<div class="scrollbar" id="style-default">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
</div>
</div>
更多info
答案 1 :(得分:0)
我在我的项目中做了同样的事情,只需在div上添加customSroller
:)
.customSroller::-webkit-scrollbar {
width: 0.4em; }
.customSroller::-webkit-scrollbar-thumb {
background-color: gray;
outline: 1px solid transparent; }
.customSroller::-webkit-scrollbar-track {
background: transparent; }
.customSroller{
overflow-y: hidden !important; }
.customSroller{
overflow-y: scroll !important; }
答案 2 :(得分:0)
你只是使用了错误的语法:事实上,正确的语法是:
#div1::-webkit-scrollbar {
width: 10px;
}
#div1::-webkit-scrollbar-thumb {
background-color: blue;
}
#div2::-webkit-scrollbar {
width: 10px;
}
#div2::-webkit-scrollbar-thumb {
background-color: red;
}