html - 改变水平滚动条的宽度

Question

如何更改水平滚动条的宽度。我想减小宽度而不是 div 大小。（不想要 100% 宽度）

标签： htmlcssscrollbar

Answer 1

这可以使用自定义end和start滚动条轨道片段来完成。

实际上，您使开始和结束部分不可见并在其上设置较大的边距，它会将可用滚动条的宽度减小到您想要的大小。

您可以通过更改and块margin上的 s来修改位置和宽度。startend

请看以下演示：

.container {
  width: 300px;
}

.inner {
  display: flex;
  overflow-x: scroll;
}

.inner::-webkit-scrollbar {
  height: 5px;
}
  
.inner::-webkit-scrollbar-thumb {
  background-color: blue;
}

.inner::-webkit-scrollbar-track-piece:end {
  margin-right: 50px; 
}

.inner::-webkit-scrollbar-track-piece:start {
  margin-left: 50px;
}

<div class="container">
  <div class="inner">
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
  </div>
</div>