在用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 */