解決滾動條加載出現的頁面抖動


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%);"


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM