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