Question

我正试图通过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。

Answer 1

此示例可能会为您提供有关如何执行此操作的提示：

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

它使用CSS和JavaScript来实现结果，但似乎你可以通过仅使用CSS（ jsfiddle 上给出的示例）来实现这一点：

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

隐藏/显示Chrome扩展程序的滚动条

2 个答案: