嵌套区块滚动条适配：显示A区块滚动条，隐藏B区块滚动条且保持可滚动

问题分析 #

你遇到的核心问题是全局::-webkit-scrollbar样式的优先级覆盖了子容器的自定义样式，同时部分属性用法有误（比如scrollbar-color的参数格式），且不同浏览器对滚动条属性的支持存在差异：

• 原生CSS不支持嵌套写法（.myElement { ::-webkit-scrollbar {} }），这种语法仅在SCSS/LESS等预处理器中生效
• scrollbar-color需要传入两个值（滑块色+轨道色），单值写法无效，且仅Firefox支持
• scrollbar-width: none仅Firefox支持，WebKit系浏览器（Chrome/Safari）不识别该属性

可行解决方案 #

需要针对WebKit和Firefox分别编写兼容代码，同时强制覆盖全局滚动条样式：

1. 针对WebKit系浏览器（Chrome、Safari等）

直接使用元素+滚动条伪元素的选择器，通过!important强制覆盖全局样式，将滚动条宽度设为0并隐藏轨道/滑块：

/* 隐藏子容器的滚动条 */
.myElement::-webkit-scrollbar {
  width: 0 !important;
  background-color: transparent;
}
.myElement::-webkit-scrollbar-track {
  background-color: transparent;
}
.myElement::-webkit-scrollbar-thumb {
  background-color: transparent;
}

2. 针对Firefox浏览器

使用Firefox专属的scrollbar-width属性直接隐藏滚动条：

.myElement {
  scrollbar-width: none; /* Firefox 下直接隐藏滚动条 */
}

3. 基础配置（必加）

确保子容器myElement开启滚动功能：

.myElement {
  overflow-y: auto; /* 或 overflow: auto，根据需求选择垂直/水平滚动 */
}

为什么之前的方法无效？ #

• 方法1的嵌套写法在原生CSS中不生效，必须将伪元素直接写在选择器后
• 方法2的scrollbar-color: transparent参数格式错误，正确写法应为scrollbar-color: transparent transparent;，但仅Firefox支持，无法解决WebKit系的问题
• 方法3仅对Firefox生效，WebKit浏览器不识别该属性，因此滚动条依然显示

内容的提问来源于stack exchange，提问作者Senzawa