Estoy haciendo un poco de desarrollo frontend a través de Vue.JS y Vuetify. Mi objetivo era archivar una barra de desplazamiento oculta (aunque sé que no puedo eliminarla ^^) y sé que el fragmento de código que se muestra a continuación debería hacer el trabajo, están ubicados en index.html que se usa como plantilla para vue -cli para construir el sitio web:
<style> html::-webkit-scrollbar { display: none; } html { -ms-overflow-style: none; } </style>En Chrome y MS Edge, esto funciona perfectamente, pero en Safari y Firefox, por ejemplo, no hace nada, incluso si se muestra en las herramientas del desarrollador, parece que se ignora por completo. Si lo coloco en cada App.vue (obtuve un proyecto de varias páginas), parece funcionar, pero ¿por qué? ¿Y hay una solución a este problema?
Saludos
Para ocultar la barra de desplazamiento en Chrome, Firefox e IE, puede usar esto:
.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; }