頁面滾動條的動態顯示隱藏

　　最近用html2canvas做圖片的時候，發現生成的圖片總是偏移了一點，后來發現是滾動條的占用問題

　　之前提到可以用以下方式解決，但vue是單頁面應用，所以使用后會導致所有頁面滾動條都消失

　　body::-webkit-scrollbar{
        display: none;
    }

 

　　把以上代碼放在需要頁面使用，退出之后，樣式還是會污染所有的滾動條樣式

　　使用insertRule進行修改，發現沒什么用

　　insertRule：給當前樣式表插入新的樣式規則

 

document.styleSheets[document.styleSheets.length-1].insertRule('body::-webkit-scrollbar { display: "" }', 0);

　　0表示插入cssrules的位置

　　dispaly后面必須寫正確的屬性值(block)，設置為空就會失效，但是只有移除這個樣式才能讓滾動條顯示，所以設置display："block"，width：1px都沒用

 

 　　　　

　　所以就在考慮換個方式解決，查了一些刪除偽類樣式方案后，最終解決方案是通過document.styleSheets進入頁面時創建，離開時銷毀

　　document.styleSheets： 只讀屬性，返回一個由 StyleSheet 對象組成的 StyleSheetList，每個 StyleSheet 對象都是一個文檔中鏈接或嵌入的樣式表。

　　只要進入頁面樣式都會儲存在樣式表中，之前沒有看清是只讀屬性，一直在找如何刪除指定樣式表的方案，踩了點坑

 

　　這里要用到跟上面相反的操作屬性deleteRule

　　deleteRule：從當前樣式表對象中刪除指定的樣式規則

 

mounted()

document.styleSheets[document.styleSheets.length-1].insertRule('body::-webkit-scrollbar { display: none }', 0);

 

 

destroyed()

document.styleSheets[document.styleSheets.length-1].deleteRule(0);

 

 

這里只是刪除了樣式規則，並沒有刪除指定的樣式表，操作的是最后一張樣式表

這樣就可以在當前頁面隱藏滾動條了