如何为电商网站指定的overflow滚动条单独设置CSS样式？

要仅为电商网站中特定的滚动容器设置样式，而非全局所有滚动条，只需给目标容器添加专属选择器（比如类名），再针对该选择器下的滚动条伪元素编写CSS即可，不会影响页面body的滚动条。

实现步骤 #

1. 给目标容器添加专属类
   给需要自定义滚动条的容器加上唯一类名，比如.product-list-scroll（可根据实际场景命名）：

   <div class="product-list-scroll" style="overflow-y: auto; height: 400px;">
     <!-- 这里是容器内的内容，比如商品列表 -->
   </div>
   

2. 编写针对该容器的滚动条样式
   不同浏览器对滚动条样式的支持有所差异，以下是主流浏览器的兼容写法：

   WebKit内核浏览器（Chrome、Safari、Edge等）

   使用::-webkit-scrollbar系列伪元素精准控制样式：

   /* 滚动条整体宽度/高度 */
   .product-list-scroll::-webkit-scrollbar {
     width: 6px; /* 垂直滚动条宽度 */
     height: 6px; /* 水平滚动条高度（如果需要） */
   }
   
   /* 滚动条轨道样式 */
   .product-list-scroll::-webkit-scrollbar-track {
     background-color: #f5f5f5;
     border-radius: 3px;
   }
   
   /* 滚动条滑块样式 */
   .product-list-scroll::-webkit-scrollbar-thumb {
     background-color: #ccc;
     border-radius: 3px;
   }
   
   /* 滑块hover状态 */
   .product-list-scroll::-webkit-scrollbar-thumb:hover {
     background-color: #999;
   }
   

   Firefox浏览器

   使用标准的scrollbar-width和scrollbar-color属性：

   .product-list-scroll {
     scrollbar-width: thin; /* 可选值：auto / thin / none */
     scrollbar-color: #ccc #f5f5f5; /* 滑块颜色 轨道颜色 */
   }
   

这样设置后，只有带有.product-list-scroll类的容器会应用自定义滚动条样式，页面其他区域（包括body）的滚动条保持默认样式。

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