css为盒子设置滚动条&隐藏滚动条

在CSS中，可以使用overflow属性来控制元素的滚动条。如果你想要为盒子设置滚动条，同时隐藏滚动条，可以使用::-webkit-scrollbar伪元素来针对不同浏览器进行样式设置。

以下是一个示例，展示了如何为一个盒子设置滚动条并隐藏它：

/* 设置盒子可滚动 */
.scroll-box {
  width: 300px;
  height: 200px;
  overflow: auto; /* 自动显示滚动条 */
}
 
/* 针对Webkit内核浏览器隐藏滚动条 */
.scroll-box::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
 
/* 针对FireFox浏览器隐藏滚动条 */
.scroll-box * {
  scrollbar-width: none; /* 对于FireFox 64 */
}
 
/* 针对IE和Edge浏览器隐藏滚动条 */
.scroll-box {
  -ms-overflow-style: none; /* 对于IE和Edge */
}

HTML部分：

<div class="scroll-box">
  这里是可以滚动的内容...
  <!-- 更多内容 -->
</div>

这段CSS代码将会为类名为scroll-box的元素设置滚动条，并且通过伪元素::-webkit-scrollbar将Webkit内核浏览器的滚动条隐藏。对于FireFox，使用了scrollbar-width属性，对于IE和Edge，使用了-ms-overflow-style属性。这样就可以实现在保留滚动功能的同时隐藏滚动条的效果。