css控制盒子可以滚动,且滚动条隐藏,还要兼容火狐浏览器,具体代码实现
时间: 2023-08-10 17:35:13 浏览: 96
可以使用CSS的overflow属性来控制盒子的滚动,使用::-webkit-scrollbar来隐藏滚动条。为了兼容火狐浏览器,还需要使用::-moz-scrollbar。
具体的代码实现如下:
```css
/* 控制盒子可以滚动 */
.box {
overflow: auto;
}
/* 隐藏滚动条 */
.box::-webkit-scrollbar,
.box::-moz-scrollbar {
width: 0;
height: 0;
}
/* 火狐浏览器兼容 */
.box::-moz-scrollbar-track,
.box::-moz-scrollbar-thumb {
background-color: transparent;
}
```
以上代码中,.box为需要控制滚动的盒子的class。通过overflow: auto;实现盒子的滚动。使用::-webkit-scrollbar和::-moz-scrollbar来控制滚动条的样式,其中::-moz-scrollbar需要针对火狐浏览器进行兼容处理。最后,通过将滚动条的宽度和高度都设为0来隐藏滚动条,同时将滚动条的背景颜色设置为透明。
阅读全文