從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。

來源

2017-10-06 kecman

請[編輯]這個問題是關於話題：包括[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; 
}

來源

2017-10-07 00:06:36

此解決方案僅限於單個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();

來源

2017-10-07 17:56:56 kecman

不要在此處使用'.innerHTML'。使用'.textContent'。你爲什麼混合香草JavaScript和jQuery？對於你在這裏做的小事，你真的*不應該加載jQuery（最小化代碼的85KiB），只是爲了使用vanilla JavaScript保存幾個字符：'document.getElementById（'remove-scroll-style'）。remove （）;' – Makyen

我需要其他的東西的jQuery，這只是代碼的一部分。而且jQuery從Chrome擴展本地加載，所以它不是問題。感謝.textContent的建議，我忘了它。 – kecman

從Chrome擴展程序隱藏/顯示滾動條

回答

相關問題