Skip to content

[Help] 如何修改滚动条的样式 #538

@gin-18

Description

@gin-18

我在src/style/scrollbar.css文件中设置了下面的样式:

/* 滚动条容器 */
::-webkit-scrollbar {
  width: 8px; /* 垂直滚动条宽度 */
  height: 8px; /* 水平滚动条高度 */
}

/* 滚动轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

/* 滚动滑块 */
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
  transition: background 0.3s ease;
}

/* 滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 滑块激活状态 */
::-webkit-scrollbar-thumb:active {
  background: #888888;
}

/* 轨道两端按钮 */
::-webkit-scrollbar-button {
  display: none; /* 隐藏默认按钮 */
}

/* 角落交汇区域 */
::-webkit-scrollbar-corner {
  background: #f1f1f1;
}

并在main.tsimport './style/scrollbar.css'引入了,已确认在scrollbar.css文件中的其他样式是生效的,但是滚动条相关的样式是未生效,是否有什么办法可以修改应用中滚动条的样式?

Metadata

Metadata

Assignees

No one assigned

    Labels

    help wantedExtra attention is needed

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions