css隐藏元素滚动条兼容各大浏览器

原创于 2023-07-19 09:38:13 发布 · 312 阅读

CC 4.0 BY-SA版权

文章标签：

文章介绍了如何使用CSS来隐藏特定元素（如table或表单）的滚动条，以保持页面美观。针对Chrome和Safari，使用`::-webkit-scrollbar`伪元素设置宽度为0；对于Firefox，应用`scrollbar-width:none`；而对于IE10及以上版本，利用`-ms-overflow-style:none`实现兼容。

image.png

常见的场景有外层body滚动，页面内嵌表格或表单等内容过长出现滚动条，为了美观性，需要隐藏table等元素的滚动条

/* 谷歌，元素隐藏必须设置宽度  不然无效 */
    .aa::-webkit-scrollbar {
        width: 0px;
        height: 30px;
    }

    /* 使用伪类选择器 ::-webkit-scrollbar ,兼容chrome和safari浏览器 */
    /* display: none; 只能直接作用于body html，其他元素设置宽度的方式 */
    /* .aa::-webkit-scrollbar{
        display: none;
    } */

    /* /兼容火狐/ */
    .aa {
        scrollbar-width: none;
    }
    
    /* / 兼容IE10+ */
    .aa {
        -ms-overflow-style: none;
    }