2023年6月20日发(作者：)

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

2023年6月20日发(作者：)

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