scrollbar隐藏滚动条border

要隐藏滚动条边框，可以使用CSS的scrollbar-track-color属性，该属性用于设置滚动条的轨道颜色，可以将其设置为与背景颜色相同，以达到隐藏滚动条边框的效果，具体代码如下：

/*隐藏垂直滚动条边框*/
::-webkit-scrollbar-track-vertical {
  background-color: #f5f5f5; /* 设置轨道颜色 */
  border: none; /* 隐藏边框 */
}

/*隐藏水平滚动条边框*/
::-webkit-scrollbar-track-horizontal {
  background-color: #f5f5f5; /* 设置轨道颜色 */
  border: none; /* 隐藏边框 */
}

需要注意的是，这种方法只适用于Webkit浏览器，例如Google Chrome和Safari。如果您需要在其他浏览器中隐藏边框，请考虑使用其他方法，例如使用JavaScript自定义滚动条。

相关问题

element-ui的el-scrollbar修改滚动条样式 但是目前在chrome浏览器中 ::webkit-scrollbar不生效

### 解决 `element-ui` 中 `el-scrollbar` 组件在 Chrome 浏览器里自定义滚动条样式无效的问题

对于 `element-ui` 的 `el-scrollbar` 组件，在 Chrome 浏览器中如果发现自定义滚动条样式的设置不起作用，可以尝试以下方法来解决问题。

#### 方法一：覆盖默认样式
为了确保自定义的滚动条样式能够生效，可以通过增加 CSS 特异性的方式强制应用新的样式。具体做法是在原有基础上添加更具体的类名或 ID 来提高优先级：

/* 提高特异度 */
.el-scrollbar >>> .el-scrollbar__bar {
    /* 设置滚轴颜色和其他属性 */
}

.el-scrollbar >>> .el-scrollbar__wrap {
    overflow-x: hidden;
}

这里使用了深色模式的选择符 (`>>>`) 来穿透 Vue 单文件组件的作用域限制[^1]。

#### 方法二：调整伪元素选择方式
有时直接修改 `.el-scrollbar` 下的相关伪元素可能无法达到预期效果，这时应该考虑改变目标对象的选择路径。例如，针对 WebKit 内核浏览器（如 Chrome），可以直接操作实际渲染出来的滚动条部分：

/* 隐藏整个滚动条 */
body .el-scrollbar ::-webkit-scrollbar {
    width: 8px; /* 可选参数 */
    height: 8px; /* 可选参数 */
}

/* 修改滑块的颜色和形状 */
body .el-scrollbar ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* 更改轨道背景 */
body .el-scrollbar ::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}

上述代码通过给定更高的上下文环境（即 body 标签作为父容器）增强了样式的针对性[^2]。

#### 方法三：处理特定框架下的特殊行为
考虑到某些前端库可能会有自己的一套机制影响到标准 HTML/CSS 行为，因此还需要注意是否有其他因素干扰到了正常的样式加载过程。比如 Element UI 或者项目中的全局配置可能导致冲突。此时建议排查是否存在重复定义或其他插件的影响，并适当调整引入顺序或者移除不必要的依赖项[^3]。

综上所述，当面对 `element-ui` 的 `el-scrollbar` 在 Chrome 上自定义滚动条样式失效的情况时，可以从增强 CSS 规则的具体性和准确性入手，同时也要留意潜在的技术栈兼容性问题。

隐藏滚动条

要隐藏滚动条，可以使用 CSS 的 `overflow` 属性和 `::-webkit-scrollbar` 伪元素来实现，具体的代码如下：

/* 隐藏滚动条 */
body {
  overflow: hidden;
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1);
}

其中，`body` 元素的 `overflow` 属性设置为 `hidden` 可以隐藏滚动条。如果需要自定义滚动条的样式，可以使用 `::-webkit-scrollbar` 伪元素来设置。`::-webkit-scrollbar-thumb` 可以设置滚动条的滑块样式，`::-webkit-scrollbar-track` 可以设置滚动条的轨道样式。