更改y轴(水平)滚动条样式 [英] Change y-axis (horizontal) scrollbar styles

问题描述

我想更改div的水平滚动条样式.

I want to change the horizontal scrollbar styles of a div.

我成功地更改了x轴(垂直)滚动条样式，但是当我添加y轴滚动条时，它采用的样式与我为y轴添加的样式相同.

I successfully changed the x-axis (vertical) scrollbar style but when I added y-axis scroll, it is taking same styles as I added for the y-axis.

我想对两个滚动条设置不同的样式.有什么可能的办法做到这一点?

I want to style both scrollbars differently. Is there any possible way to make this happen?

(x轴)垂直滚动条的当前CSS:

Current CSS for (x-axis) vertical scrollbar:

 .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;
}

推荐答案

您可以通过在该div上简单应用overflow-y:scroll来实现. 希望对您有帮助.

You can do this by simple apply overflow-y:scroll on that div. I hope this will help you.

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>

这篇关于更改y轴(水平)滚动条样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！