当 Chrome 和 Edge 隐藏滚动条时，Vue.JS Firefox 和 Safari 不隐藏滚动条答案

【问题标题】：Vue.JS Firefox and Safari don't hides scrollbar when Chrome and Edge do当 Chrome 和 Edge 隐藏滚动条时，Vue.JS Firefox 和 Safari 不隐藏滚动条
【发布时间】：2022-02-09 18:07:40
【问题描述】：

我正在通过 Vue.JS 和 Vuetify 进行一些前端开发。我的目标是归档一个隐藏的滚动条（通过我知道我不能删除它^^）并且我知道下面显示的代码 sn-p 应该可以完成这项工作，它们位于用作模板的 index.html 中vue-cli 搭建网站：

<style>
    html::-webkit-scrollbar { display: none; }
    html { -ms-overflow-style: none; }
</style>

在 Chrome 和 MS Edge 上，这些功能完美无缺，但在 Safari 和 Firefox 上却无济于事 - 即使它显示在开发工具中，它似乎也被完全忽略了。如果我将它放入每个 App.vue（我有一个多页项目）中，它似乎可以工作，但为什么呢？这个问题有解决办法吗？

问候

【问题讨论】：

标签： javascript html css vue.js scrollbar

【解决方案1】：

要在 Chrome、Firefox 和 IE 上隐藏滚动条，您可以使用以下命令：

   .hide-scrollbar
{
    overflow: auto;
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */
}

【讨论】：

【解决方案2】：

Perhaps this will help?

.your-class {
    /*FireFox*/
    scrollbar-width: none;
    /*IE10+*/
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.your-class::-webkit-scrollbar {
    /*Chrome, Safari, Edge*/
    display: none;
}

【讨论】：

scrollbar-width: none; 为 Firefox 工作，Safari 仍然无法工作。我的代码是您的 -webkit-scrollbar 代码的一对一实现。