Change y-axis (horizontal) scrollbar styles

问题

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

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?

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

回答1:

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>

来源：https://stackoverflow.com/questions/43738245/change-y-axis-horizontal-scrollbar-styles

标签

javascript

html

css

css3

scrollbar