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