html中美化右侧滑动条,纯css美化滚动条样式 -webkit-scrollbar

可以使用CSS中的`::-webkit-scrollbar`伪元素来美化右侧滑动条，具体的样式可以根据自己的需求进行调整。以下是一个样例：

/* 设置滚动条的宽度和高度 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 滚动条 */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

/* 当鼠标悬浮在滚动条上方时 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

注意，这个样式只适用于使用webkit内核的浏览器，例如Chrome和Safari。如果要在其他浏览器上使用类似的样式，可以尝试使用其他的伪元素，例如`::-moz-scrollbar`和`::-ms-scrollbar`。

相关问题

/* 全局css变量 */ $--color-primary: #409EFF; .primary-color { color: #409EFF; } .background-opacity { background: rgba(64, 158, 255, 0.6); } .form-widget-list { .ghost{ content: ''; font-size: 0; height: 3px; box-sizing: border-box; background: #409EFF; border: 2px solid #409EFF; outline-width: 0; padding: 0; overflow: hidden; } } .el-form-item--medium { .el-radio { line-height: 36px !important; } .el-rate{ margin-top: 8px; } } .el-form-item--small { .el-radio { line-height: 32px !important; } .el-rate{ margin-top: 6px; } } .el-form-item--mini { .el-radio { line-height: 28px !important; } .el-rate{ margin-top: 4px; } } .el-card { margin-top: 3px; margin-bottom: 3px; } input[type="password"]::-ms-reveal { /* 隐藏IE/Edge原生的密码查看按钮 */ display: none; } /* 滚动条样式 begin */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { width: 8px; background: rgba(#101F1C, 0.1); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } ::-webkit-scrollbar-thumb { background-color: rgba(#101F1C, 0.35); background-clip: padding-box; min-height: 28px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(#101F1C, 0.85); } * {//Firefox浏览器滚动条样式 scrollbar-color: #e5e5e5 #f7f7f9; //滚动条轨道颜色、滚动条滑块的颜色 scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失 } /* body {//IE浏览器滚动条样式 scrollbar-shadow-color: #e5e5e5; scrollbar-face-color: #e5e5e5; scrollbar-base-color: #ffffff; scrollbar-arrow-color: #444040; } */ /* 滚动条样式 end */

这段代码定义了一些全局的 CSS 变量和样式，包括：

- 定义了一个名为 `$--color-primary` 的全局 CSS 变量，其值为 `#409EFF`。
- 定义了一个名为 `.primary-color` 的样式类，将其文本颜色设置为 `$--color-primary` 定义的颜色。
- 定义了一个名为 `.background-opacity` 的样式类，将其背景色设置为带有 60% 不透明度的蓝色。
- 定义了一个名为 `.form-widget-list` 的样式类，其中包含了一个名为 `.ghost` 的子样式类，将其高度设置为 3 像素，颜色设置为 `$--color-primary` 定义的颜色，边框为 2 像素宽的 `$--color-primary` 定义的颜色。
- 定义了 `.el-form-item--medium`、`.el-form-item--small` 和 `.el-form-item--mini` 三个样式类，分别对应中、小、迷你三种表单元素大小，对其内部的单选框和评分控件进行了样式调整。
- 定义了 `.el-card` 样式类，将其上下 margin 值设置为 3 像素。
- 定义了一些滚动条的样式，包括滚动条宽度、颜色等等。其中包括针对不同浏览器的样式设置。

在app.vue中设置了/* 修改滚动条样式 */ ::v-deep ::-webkit-scrollbar { width: 5px; /* 设置滚动条宽度 */ } ::v-deep ::-webkit-scrollbar-thumb { background-color: #ccc; /* 设置滚动条拖动块的颜色 */ } ::v-deep ::-webkit-scrollbar-track { background-color: #f1f1f1; /* 设置滚动条背景颜色 */ }，但是不生效

首先，需要确认你的浏览器是否为 Webkit 内核，因为 `::-webkit-scrollbar` 伪元素只适用于基于 Webkit 内核的浏览器，如 Chrome 和 Safari。如果你使用的是其他浏览器，如 Firefox 或 Edge，需要使用对应的伪元素，如 `::-moz-scrollbar` 或 `::-ms-scrollbar`。

其次，需要确认你的样式是否被正确应用。`::v-deep` 选择器是 Vue2 中的语法，用于解决样式作用域的问题。如果你在 App.vue 中设置了样式，但是在组件中没有使用 `::v-deep` 选择器，那么样式不会被正确应用。你需要在组件中使用 `::v-deep` 选择器来覆盖全局样式。

最后，如果你的样式还是不生效，可以尝试使用 `!important` 关键字来强制应用样式，例如：

/* 修改滚动条样式 */
::v-deep ::-webkit-scrollbar {
  width: 5px !important; /* 设置滚动条宽度 */
}

::v-deep ::-webkit-scrollbar-thumb {
  background-color: #ccc !important; /* 设置滚动条拖动块的颜色 */
}

::v-deep ::-webkit-scrollbar-track {
  background-color: #f1f1f1 !important; /* 设置滚动条背景颜色 */
}

需要注意的是，`!important` 关键字会覆盖所有的样式优先级，包括行内样式和内联样式，所以应该谨慎使用。