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

问题描述：

我想通过Chrome扩展程序在页面上隐藏\显示滚动条。从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。

请[编辑]这个问题是关于话题：包括[mcve] *重复了问题*。对于Chrome扩展程序或Firefox Web扩展程序，几乎总是需要包含* manifest.json *和一些背景，内容和/或弹出脚本/ HTML以及常用的网页HTML /脚本。寻求调试帮助的问题（“为什么我的代码不按我想要的方式工作？”）必须包括：（1）期望的行为，（2）特定问题或错误，以及（3）重现它所需的最短代码*在问题本身*。请参阅：[我可以在这里询问什么主题？]（/ help/on-topic）和[问]。 – Makyen

答

这个例子可以给你如何做一个提示：

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

它使用CSS和JavaScript来实现的结果，但它好像你可以只用CSS实现这一目标（例如在的jsfiddle）给出：

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

此解决方案仅限于单个div，我需要它可以用于整个页面和每个页面。此外，我需要保留鼠标滚动/键盘箭头功能，以便即使隐藏滚动条，用户也能够滚动 – kecman

答

我通过内容脚本来实现这一点。此代码删除滚动条，仍然允许你使用鼠标滚轮或键盘按钮滚动：

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

不要在此处使用'.innerHTML'。使用'.textContent'。你为什么混合香草JavaScript和jQuery？对于你在这里做的小事，你真的*不应该加载jQuery（最小化代码的85KiB），只是为了使用vanilla JavaScript保存几个字符：'document.getElementById（'remove-scroll-style'）。remove （）;' – Makyen

我需要其他的东西的jQuery，这只是代码的一部分。而且jQuery从Chrome扩展本地加载，所以它不是问题。感谢.textContent的建议，我忘了它。 – kecman

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

相关推荐