我正在尝试通过我的 Chrome 扩展隐藏\显示页面上的滚动条。
我通过从 background.js 文件插入这个 CSS 来隐藏它:
::-webkit-scrollbar {
display: none !important;
}
::-webkit-scrollbar-button {
display: none !important;
}
然后我尝试通过从 background.js 文件中插入此 CSS 来再次显示它:
::-webkit-scrollbar {
display: block !important;
}
::-webkit-scrollbar-button {
display: block !important;
}
隐藏有效,但之后我无法恢复它。当我通过 Chrome DevTools 检查页面时,它显示好像两个插入的 CSS 同时处于事件状态。
还有其他方法吗? 需要注意的重要一点是,这应该适用于任何页面,因此我能够从插入 CSS 的任何页面删除和恢复滚动条。
我对任何其他方式都持开放态度,JavaScript 也是。
最佳答案
我通过内容脚本实现了这一点。 此代码删除了滚动条,但仍允许您使用鼠标滚轮或键盘按钮进行滚动:
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);
这段代码恢复了滚动条:
$('#remove-scroll-style').remove();
关于javascript - 隐藏/显示 chrome 扩展的滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46615280/