我想更改div的水平滚动条样式。
我成功地改变了x轴(垂直)滚动条样式但是当我添加了y轴滚动时,它采用了与我为y轴添加的样式相同的样式。
我想以不同的方式设置两个滚动条的样式。有没有可能的方法来实现这一目标?
(x轴)垂直滚动条的当前CSS:
.list-group {
overflow-y: scroll;
max-height: 335px;
border: 1px solid #bdbdbd;
padding: 10px;
}
.list-group::-webkit-scrollbar {
width:35px;
}
.list-group::-webkit-scrollbar-button:increment {
background-image: url('../images/arrow down.png');
background-repeat: no-repeat;
height: 30px;
border-bottom: 2px solid transparent;
}
.list-group::-webkit-scrollbar-button:decrement {
background-image: url('../images/arrow up.png');
background-repeat: no-repeat;
height: 30px;
border-top: 10px solid transparent;
}
答案 0 :(得分:1)
您可以通过简单地在该div上应用overflow-y:scroll
来执行此操作。
我希望这会对你有所帮助。
div
{
width: 30em;
overflow-x: auto;
white-space: nowrap;
}
div::-webkit-scrollbar {
width: 1em;
}
div::-webkit-scrollbar-track {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
div::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #00bd86;
outline: 2px solid slategrey;
}
div::-webkit-scrollbar:vertical {
display: none;
}

<div>
Its a test div
Its a test div
Its a test div
Its a test div
Its a test div
Its a test div
Its a test div
Its a test div
Its a test div
Its a test div
Its a test div
Its a test div
Its a test div
Its a test div
Its a test div
Its a test div
Its a test div
Its a test div
Its a test div
Its a test div
</div>
&#13;
答案 1 :(得分:0)
他们这个代码:
#container::-webkit-scrollbar-button:vertical:increment {
background-color: red;
}
#container::-webkit-scrollbar-button:vertical:decrement {
background-color: green;
}
#container::-webkit-scrollbar-button:horizontal:increment {
background-color: yellow;
}
#container::-webkit-scrollbar-button:horizontal:decrement {
background-color: blue;
}