uniapp scroll-view组件隐藏滚动条
在用scroll-view的时候:用手机模拟器和小程序查看的时候并没有出现滚动条,真机运行的时候出现滚动条,用h5直接看的时候出现滚动条,我发现的解决办法有两种:1.在app.vue的style里面外部链接base.css 这种办法比较适配,控制所有滚动条<style>@import url("./base.css");</style>在base.css中::-webkit
·
在用scroll-view的时候:用手机模拟器和小程序查看的时候并没有出现滚动条,真机运行的时候出现滚动条,用h5直接看的时候出现滚动条,我发现的解决办法有两种:
1.在app.vue的style里面外部链接base.css 这种办法比较适配,控制所有滚动条
<style>
@import url("./base.css");
</style>
在base.css中
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}
2.直接在app.vue里面用条件编译,可以根据不同平台控制不同标签的属性
<style>
@import url("./base.css");
/* 解决小程序和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 */
</style>
本文转载自:https://blog.csdn.net/miga1/article/details/107202779/
更多推荐
已为社区贡献5条内容
所有评论(0)