DCloud_UNI_GSQ
DCloud_UNI_GSQ
  • 发布:2019-07-03 12:27
  • 更新:2023-12-28 18:08
  • 阅读:21726

隐藏 scroll-view 组件的滚动条

分类:uni-app

App.vue 增加如下样式可以去除 scroll-view 组件的滚动条(不支持nvue页面)

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

注意:
iOS 13 以下的系统,当滚动区域设置了-webkit-overflow-scrolling: touch;时(必须设置,否者几乎无法滚动),::-webkit-scrollbar 相关属性会失效,iOS 13 已经修复了此Bug。

10 关注 分享
wenju SimpleJalon 1***@qq.com 9***@qq.com sonicsunsky x***@163.com l***@163.com Isaymore 喜欢技术的前端 DCloud_UNI_HRK

要回复文章请先登录注册

2***@qq.com

2***@qq.com

回复 掌心的温度 :
v3找到方法了么?
2023-12-28 18:08
2***@qq.com

2***@qq.com

回复 3***@qq.com :
有效!!感谢!
2023-08-12 15:18
蜗牛小弟

蜗牛小弟

回复 1***@qq.com :
nvue参考我这篇文章https://ask.dcloud.net.cn/article/40669
2023-08-07 22:00
掌心的温度

掌心的温度

没用啊。 vue3
2023-08-06 21:51
7***@qq.com

7***@qq.com

没用
2023-06-14 17:27
小枫同学

小枫同学

没啥用啊
2022-06-09 23:34
5***@qq.com

5***@qq.com

隐藏横向滚动条,在scroll-view外层加一个高度更小的view遮挡滚动条即可。亲测有效。
<view style="overflow: hidden;height: 80upx;">
<scroll-view :scroll-x="true" :scroll-with-animation="true" :show-scrollbar="false" style="height:100upx;">
<view class="flex-row ft-content" style="justify-content: flex-start;">
内容
</view>
</scroll-view>
</view>
2021-10-12 15:45
3***@qq.com

3***@qq.com

「 uni-app scroll-view去除滚动条 笔记:/deep/.uni-scroll-view ::-webkit-scrollbar {
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
display: none;
width: 0;
height: 0;
color: transparent;
background: transparent;
}
/deep/::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
background: transparent;
}
测试有效
2021-06-24 11:15
luojl

luojl

难过在app.vue中添加了没用
2021-05-13 15:58
1***@qq.com

1***@qq.com

那nvue页面咋办
2021-03-22 11:29