使用css以不同方式自定义垂直和水平滚动条？

Question

我正在尝试为水平和垂直滚动条添加两种不同的样式。

我想要在我的文档中同时使用水平和垂直滚动，但厚度不同。我想隐藏垂直滚动条但保持可滚动。

我该如何做到这一点？

<div class="scroll-container" style="width: 200px; height: 200px; overflow: scroll;">
     <div style="width:300px; height:300px;">
        <h1>Hello World</h1>
     </div>
    </div>

Answer 1

::-webkit-scrollbar {
  width: 4px;
  border: 1px solid #d5d5d5;
}

::-webkit-scrollbar-track {
  border-radius: 0;
  background: #eeeeee;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: blue;
}

 ::-webkit-scrollbar-thumb:horizontal{
        background: red;
        border-radius: 1px;
 }

你可以做这样的事情来设计他们两个

Answer 2

基本上我想在我的文档中同时拥有水平和垂直卷轴，但我想为它们设置不同的厚度。具体来说，我想隐藏垂直滚动条但保持可滚动。 事实证明，如果你设置宽度，它会改变垂直滚动的粗细，如果你设置高度，它会改变水平滚动的粗细。

.scroll-container{
  background: grey;
}
.scroll-container::-webkit-scrollbar{
  width: 5px; /*sets the thickness of vertical scroll  */
  height: 8px; /*sets the thickness of horizontal scroll */
}
.scroll-container::-webkit-scrollbar-thumb{
  background-color: red;
  border-radius: 10px;
}
.scroll-container::-webkit-scrollbar-track{
  background-color: black;
}

<div class="scroll-container" style="width: 200px; height: 180px; overflow: scroll;">
  <div style="width:300px; height:300px;">
    <h1>Hello World</h1>
  </div>
</div>