Vue.JS Firefox and Safari don't hides scrollbar when Chrome and Edge do-CodePudding

Im doing a bit of frontend development via Vue.JS and Vuetify. My goal was it to archive a hidden scrollbar (through i know i cannot delete it ^^) and i know that the code snippet shown below should do the job, they are located in the index.html that is used as a template for vue-cli to build the website:

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

On Chrome and MS Edge these works flawlessly but on for example Safari and Firefox it doesn't do a thing - even if its shown in the Developer tools it seems to be just ignored completely. If I put it into each App.vue (I got an Multi Page Project) it seems to work but why? And is there a solution to this Problem?

Greetings

CodePudding user response：

To hide scroll bar on Chrome, Firefox and IE you can use this:

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

CodePudding user response：

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;
}