PC端設置和隱藏滾動條方法


展示屏幕:1920 x 1080 屏幕

問題:

在做PC端的時候,如果頁面高度超過了1080就會有滾動條,不同游覽器的滾動條都是計算寬度的。

而我們在開發的時候會將頁面寬度限制到1920,所以當滾動條出現的時候,頁面寬度+滾動條寬度就會大於1920

如果切換兩個同級頁面A,B,如果頁面A出現了滾動條,B沒有,那么切換A,B的時候,屏幕顯示的寬度不同。

解決思路:

1. 想的是獲取到路由器滾動條寬度,讓頁面寬度+滾動條寬度 = 1920所有的頁面都需要,不管本該有沒有滾動條(未實驗)

2.隱藏滾動條:

::-webkit-scrollbar {

  width: 0 !important;

}

::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
}

MDN鏈接:::-webkit-scrollbar - CSS(層疊樣式表) | MDN (mozilla.org)

改特性是非標准的,盡量不要在生產環境中使用它!

 


免責聲明!

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



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