Hide/show 来自 chrome 扩展的滚动条

Question

我正在尝试通过我的 Chrome 扩展在页面上 hide\show 滚动条。

我通过从 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。

Answer 1

此示例可能会给您一些提示：

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

它使用 CSS 和 JavaScript 来实现结果，但似乎您可以仅使用 CSS 来实现（jsfiddle[ 上给出的示例=19=]):

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

Answer 2

我是通过内容脚本完成的。 此代码删除了滚动条，但仍然允许您使用鼠标滚轮或键盘按钮滚动：

    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();