如何在 CSS 中自定义滚动条的高度？-css教程-PHP中文网

如何在 CSS 中自定义滚动条的高度？

Patricia Arquette

发布： 2024-11-02 06:01:02

原创

319 人浏览过

How can I customize the height of a scrollbar in CSS?

自定义滚动条高度

为了修改滚动条的高度，有必要了解滚动条的结构组成。滚动条由多个元素组成，包括：

滚动条拇指：表示用户操纵滚动的可拖动区域。
滚动条轨迹： 拇指移动的背景区域。

要达到所提供图像中显示的所需效果，需要：

定义起点和终点对于滚动条拇指，确保它仅在特定区域内滚动。
创建替代滚动轨道，替换默认轨道。

这里是一个示例代码片段，演示了如何要实现此目的：

<code class="css">.wrapper {
  overflow-y: scroll;
  width: 100%;
  height: 100%;

  /* Create a fake scroll track */
  &::after {
    content: '';
    position: absolute;
    width: 5px;
    height: calc(100% - 20px);
    z-index: -1;
    top: 10px;
    background: #666;
    right: -1px;
  }

  /* Customize the scrollbar properties */
  &::-webkit-scrollbar {
    width: 5px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: red;
    border: none;
    border-radius: 5px;
  }

  /* Define the end and start points of the scrollbar thumb */
  &::-webkit-scrollbar-track-piece:end {
    margin-bottom: 10px;
  }

  &::-webkit-scrollbar-track-piece:start {
    margin-top: 10px;
  }
}</code>

登录后复制

此代码片段创建一个高度为 50% 的自定义滚动条，如所提供的图像中所指定。它通过调整滚动条拇指的大小并创建一个假滚动轨道来替换原始滚动轨道来实现这一点。

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