1、頁面抖動
原因:一個網站通常存在着多個頁面,瀏覽器默認提供的overflow:auto;根據內容進行判斷是否需要滾動條,
這造成每個頁面是否有右側的滾動條是不一致的,這會導致有滾動條的頁面跳轉到沒有滾動條的頁面會發生頁面抖動
2、解決方法一:用overflow-y:scorll顯性的設置右邊提供滾動機制
實現css代碼:html {overflow-y: scroll;overflow-x: hidden;}
;
缺點:不論屏幕是否需要滾動條,滾動條都會顯示;
3、解決方法二:滾動條寬度:calc(100vw - 100%)
100vw相對於瀏覽器的window.innerWidth,是瀏覽器的內部寬度,注意,滾動條寬度也計算在內!而100%是可用寬度,是不含滾動條的寬度。
calc()為計算方法
解決抖動可以根據是否有有滾動條進行不同的左右寬度計算:style="width: 100vw;overflow: hidden;padding-left: calc(100vw - 100%);"