如何使用 CSS 和 HTML 自定义滚动条的高度？

自定义滚动条高度

控制滚动条大小

要修改滚动条的高度，需要了解其结构。参考下图来可视化滚动条的组件：

[滚动条结构图]

要更改大小，我们将重点关注两个方面：

• 控制滚动条滑块 (5) 开始和停止滚动的位置
• 模拟假滚动轨道而不是使用默认滚动轨道 (3)

创建自定义滚动条

考虑以下代码：

CSS：

<code class="css">.page {
  position: relative;
  width: 100px;
  height: 200px;
}

.content {
  width: 100%;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px solid #ddd;
}

.page::after {
  content: '';
  position: absolute;
  z-index: -1;
  height: calc(100% - 20px);
  top: 10px;
  right: -1px;
  width: 5px;
  background: #666;
}

.wrapper::-webkit-scrollbar {
  display: block;
  width: 5px;
}

.wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.wrapper::-webkit-scrollbar-thumb {
  background-color: red;
  border-right: none;
  border-left: none;
}

.wrapper::-webkit-scrollbar-track-piece:end {
  background: transparent;
  margin-bottom: 10px;
}

.wrapper::-webkit-scrollbar-track-piece:start {
  background: transparent;
  margin-top: 10px;
}</code>

HTML：

<code class="html"><div class="page">
  <div class="wrapper">
    <div class="content">
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
    </div>
  </div>
</div></code>

此代码：

• 使用页面元素的 after 伪元素定义假滚动轨道。
• 使用应用于包装元素滚动条的 CSS 属性自定义滚动条的宽度、背景和缩略图颜色。
• 添加边距到滚动条的轨道件以控制滚动滑块的起点和终点。

通过实现这些更改，您可以修改滚动条的高度以满足您的设计要求。

以上是如何使用 CSS 和 HTML 自定义滚动条的高度？的详细内容。更多信息请关注PHP中文网其他相关文章！