uniapp——scroll-view組件隱藏滾動條


 

在用uniapp寫這個pc端項目時遇到一個表格需要展示全部的數據,但是頁面上只顯示4條數據,剛開始用overflow-y: scroll;出現滾動條。

因為滾動條占用位置導致表格錯位,上下不對齊。scroll-view組件還是出現滾動條。

重點來了!!!

在樣式中引用這段代碼,就可以解決啦!!!

 

::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}

記得在紅色框也就是最外層加一個最大高度哦,超過最大高度再滾動。

 

后來測試了下,在APP和小程序運行時會出現兼容性問題,

在樣式中引用以下代碼解決不同平台的兼容性問題

/* 解決小程序和app滾動條的問題 */
/* #ifdef MP-WEIXIN || APP-PLUS */
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}
/* #endif */

/* 解決H5 的問題 */
/* #ifdef H5 */
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
/* 隱藏滾動條,但依舊具備可以滾動的功能 */
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}
/* #endif */


免責聲明!

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



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