如何在Vue组件中通过CSS完全隐藏滚动条且保留滚动功能

你的代码存在两个核心问题导致Chrome、Safari不生效：

1. WebKit内核浏览器的滚动条伪类选择器语法为双冒号::-webkit-scrollbar，你当前写的单冒号不符合规范，无法被Chrome、Safari识别
2. 如果你的Vue组件样式添加了scoped属性，组件内的伪元素选择器默认无法作用到内部嵌套元素，需要配合深度选择器使用

非scoped样式版本（样式没加scoped属性时用） #

.v-root {
    .v-component-widget {
        .v-component-widget-header{
            .v-component-widget-header-list{
                position: absolute;
                overflow: scroll; /* 保留滚动能力，不要改成hidden */

                /* IE/旧版Edge兼容 */
                -ms-overflow-style: none;
                /* Firefox兼容 */
                scrollbar-width: none;
                /* Chrome/Safari/新版Edge兼容 */
                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }
    }
}

scoped样式版本（Vue组件样式加了scoped属性时用） #

根据Vue版本选择对应写法即可：

/* Vue2 scoped 写法 */
.v-root {
    .v-component-widget {
        .v-component-widget-header{
            /deep/ .v-component-widget-header-list{
                position: absolute;
                overflow: scroll;

                -ms-overflow-style: none;
                scrollbar-width: none;
                
                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }
    }
}

/* Vue3 scoped 写法 */
.v-root {
    .v-component-widget {
        .v-component-widget-header{
            :deep(.v-component-widget-header-list){
                position: absolute;
                overflow: scroll;

                -ms-overflow-style: none;
                scrollbar-width: none;
                
                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }
    }
}

异常排查步骤 #

如果修改后仍不生效可按以下路径排查：

• 打开浏览器开发者工具，检查对应元素的样式是否被更高优先级的规则覆盖
• 确认父元素没有额外设置overflow属性限制滚动行为
• 检查是否有全局样式统一设置了滚动条样式，优先级高于组件内样式

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