uniapp 隐藏scroll-view滚动条

最新推荐文章于 2025-05-29 15:25:12 发布
最新推荐文章于 2025-05-29 15:25:12 发布
阅读量481 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： uni-app 前端 javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50080847/article/details/127552786
本文探讨了如何使用CSS优雅地隐藏滚动条，同时保持元素可滚动，对前端开发者来说是一项实用的技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

/deep/.uni-scroll-view::-webkit-scrollbar {
            /* 隐藏滚动条，但依旧具备可以滚动的功能 */
            display: none
    }

uniapp scroll-view显示滚动条
江拥羡橙的博客
07-31 2901
【代码】uniapp scroll-view显示滚动条。
uniapp：scroll-view 聊天对话自动滚动到底部
sunluyi的博客
05-11 1694
uniapp scroll-view 聊天对话自动滚动到底部。
uni-app scroll-view隐藏滚动条的小细节 兼容主流浏览器
深夜听表
05-02 1444
想写个横向滚动的列表适配浏览器，主要就是隐藏一下滚动条在手机上美观一点。也并非标准写法，要想在firefox和IE生效可参考如下写法。解决很简单，目标标签加上空格div就行了，顺便。但是使用uni-app官方文档建议的。F12看了一下，原来编译到浏览器端时。生效了，只是生效的地方错了,在目标标签时发现没生效。下自动套了几层div，
uni-app scroll-view隐藏滚动条
m0_66139866的博客
08-19 2035
uni-app scroll-view隐藏滚动条
uniapp 隐藏所有滚动条（H5 端）
最新发布
yonghuid123453的博客
05-29 306
【代码】uniapp 隐藏所有滚动条（H5 端）
uniapp中如何隐藏scroll-view的滚动条
热门推荐
qq_44890362的博客
02-13 1万+
1.我们在使用uniapp的scroll-view组件的时候，它经常会出现滚动条，如下图所示。 2.那么我们该如何去解决呢？首先我们找到项目的App.vue文件然后在style标签里面添加如下代码，这样一来，可以根据不同平台控制不同标签的属性。 <style> /*每个页面公共css */ /* 解决小程序和app滚动条的问题 */ /* #ifdef MP-WEIXIN || APP-PLUS */ ::-webkit-scrollbar { display:.
uniapp隐藏scroll-view滚动条
smileKH的博客
03-24 3026
uniapp scroll-view
uniapp scroll-view 隐藏滚动条
Lsir1998的博客
05-17 1388
如果是想全局隐藏的话，可以放在App.vue中，如果是局部则在对应的页面中引入使用即可。
微信小程序 scroll-view隐藏滚动条详解
01-03
一：scroll-view隐藏滚动条 在书写网页的时候，往往会为了页面的美观，而选择去掉滚动区域默认的滚动条，而在这里，就是为小程序去掉滚动条的其中的一种方法： scroll-view.wxml: scroll-view.wxss scroll-view.js...
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
10-17
2. 为了解决这个问题，可以考虑使用一种“野路子”方法，即在scroll-view外包裹一个高度小于scroll-view高度的容器，这样可以截断滚动条的显示部分，从而达到隐藏滚动条的效果。通过调整外部容器的高度，并结合适当...
uniapp利用scroll-view实现左边按钮定位右边页面滚动
m0_62217360的博客
11-28 3052
uniapp利用scroll-view实现左边按钮定位右边页面滚动
uniapp scorll-view隐藏滚动条
大炮哥的博客
06-14 405
【代码】uniapp scorll-view隐藏滚动条。
uniapp隐藏scroll-view中滚动条
weixin_56374326的博客
12-11 1240
【代码】uniapp隐藏scroll-view中滚动条。
uniapp scroll-view组件隐藏滚动条
qq_47443027的博客
08-29 1682
这时候一般就会隐藏了滚动条，如果还没反应，就重新编译一下。在App.vue的style标签里增加CSS样式。在pages.json增加如下配置。
uni-app中scroll-view隐藏滚动条
qq_42984040的博客
04-08 1333
在App.vue的style代码部分加入： ::-webkit-scrollbar{ display: none; } 即可完美解决。
uniapp中如何隐藏 scroll-view 的滚动条
weixin_61769998的博客
12-01 1253
1.找到项目的App.vue文件然后在style标签里面添加如下代码，可以根据不同平台控制不同标签的属性。2.我们还可以在App.vue的style里面添加如下代码 这种办法可以控制所有的滚动条。
scroll-view在uniapp中隐藏滚动条
Heartnottowake的博客
03-18 575
在scroll-view中加入以下代码 ::-webkit-scrollbar{ width: 0; height: 0; color: transparent; } 附上完整代码 <scroll-view class="scroll" scroll-x show-scrollbar > <view class="nav" v-for="(item,index) in navs" :key="index"> <text&g
uniapp 隐藏scroll-view横向滚动条
06-03
要隐藏 `scroll-view` 组件的横向滚动条，可以通过以下步骤进行设置： 1. 在 `scroll-view` 组件上设置 `scroll-x` 属性为 `true`，表示允许横向滚动。 2. 在 `scroll-view` 组件上设置 `scroll-with-animation` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值