如何隐藏特定滚动条？redux-lazy-scroll指定滚动条隐藏方法

嘿，我完全懂你的烦恼——只想去掉redux-lazy-scroll带来的那个多余滚动条，结果全局隐藏滚动条的样式把正常的也给搞没了，这确实头疼。别担心，咱们可以通过精准定位目标容器来解决这个问题，不用动全局样式。

具体步骤： #

1. 定位目标容器
   打开浏览器开发者工具（按F12），找到那个出现多余滚动条（红色箭头指向的）的DOM元素。看看这个元素有没有自带的类名，或者它的父元素有没有可以用来定位的标识。

2. 给目标容器加专属标识（如果可以的话）
   如果你能控制redux-lazy-scroll组件的渲染，看看它的文档是否支持传入className属性。如果支持的话，给它加一个自定义类，比如：

   <ReduxLazyScroll className="redux-lazy-scroll-custom-container" {/* 其他属性 */} />
   

3. 写精准的滚动条隐藏样式
   针对这个专属类（或者你找到的定位标识）来写CSS，这样就只会隐藏这个容器的滚动条，不会影响其他正常滚动条：

   /* 隐藏webkit内核浏览器的滚动条 */
   .redux-lazy-scroll-custom-container::-webkit-scrollbar {
     display: none;
   }
   
   /* 兼容IE/Edge和Firefox */
   .redux-lazy-scroll-custom-container {
     -ms-overflow-style: none;  /* IE 和 Edge */
     scrollbar-width: none;     /* Firefox */
   }
   

   如果没法给组件传className，就用元素的结构或者自带属性来定位，比如假设这个容器是某个父元素的直接子元素，或者有特定的data属性：

   /* 比如父元素有类名lazy-scroll-parent */
   .lazy-scroll-parent > div::-webkit-scrollbar {
     display: none;
   }
   
   /* 或者元素有data属性data-scroll-container */
   [data-scroll-container]::-webkit-scrollbar {
     display: none;
   }
   

为什么全局样式不行？ #

::-webkit-scrollbar是全局伪元素选择器，会匹配页面上所有元素的滚动条。而通过给目标容器加专属类/标识，我们把样式的作用范围限制在了那个多余滚动条所在的容器上，自然就不会影响其他正常的滚动条啦。

要是你在定位元素的时候遇到困难，可以仔细看看开发者工具里的DOM结构，redux-lazy-scroll生成的容器一般会有自己的特征，比如特定的类名或者结构层级，找到它就好办了。

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