Masquer/afficher la barre de défilement de l'extension chrome

Question

J'essaie de masquer \ afficher les barres de défilement sur les pages via mon extension Chrome.

Je cache en insérant ce CSS background.js fichier:

::-webkit-scrollbar { 
    display: none !important; 
} 

::-webkit-scrollbar-button { 
    display: none !important; 
} 

et j'essaie de le montrer à nouveau en insérant ce CSS fichier background.js:

::-webkit-scrollbar { 
    display: block !important; 
} 

::-webkit-scrollbar-button { 
    display: block !important; 
} 

œuvres Hiding , mais je suis incapable de le restaurer après. Lorsque j'inspecte la page via Chrome DevTools, il apparaît que les deux CSS insérés sont actifs en même temps.

Existe-t-il un autre moyen de le faire? Une chose importante à noter est que cela devrait fonctionner sur n'importe quelle page, donc je suis capable de supprimer et de restaurer les barres de défilement de n'importe quelle page CSS est insérée.

Je suis ouvert pour tout autre chemin, JavaScript aussi.

Answer 1

Cet exemple peut vous donner un indice sur la façon de le faire:

https://jsfiddle.net/PVZB8/139/

Il utilise CSS et JavaScript pour obtenir le résultat, mais il semble que vous pouvez y parvenir en utilisant uniquement CSS (exemple donnée sur jsFiddle):

div.mousescroll { 
    overflow: hidden; 
} 
div.mousescroll:hover { 
    overflow-y: scroll; 
} 

Answer 2

J'accompli ce par-script de contenu. Ce code supprime les barres de défilement et vous permet encore de faire défiler avec les boutons mouseWheel ou clavier:

var styleElement = document.createElement('style'); 
    styleElement.id = 'remove-scroll-style'; 
    styleElement.textContent = 
     'html::-webkit-scrollbar{display:none !important}' + 
     'body::-webkit-scrollbar{display:none !important}'; 
    document.getElementsByTagName('body')[0].appendChild(styleElement); 

Et ce code restaure les barres de défilement:

$('#remove-scroll-style').remove();