更改y轴(水平)滚动条样式

时间:2017-05-02 12:45:33

标签: javascript html css css3 scrollbar

我想更改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;
}

2 个答案:

答案 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;
&#13;
&#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;
}