解决uni-app scroll-view的滚动条 隐藏滚动条，但依旧具备可以滚动的功能

最新推荐文章于 2025-09-20 14:11:57 发布
原创 最新推荐文章于 2025-09-20 14:11:57 发布 · 759 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在uni-app中实现scroll-view的滚动条隐藏，同时保持其滚动功能。通过修改特定类名，可以在不影响用户体验的情况下达到隐藏滚动条的效果。

记得自己更换类名：

/deep/ .uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}
Ylk_IT
关注
uni-app - 去除 “＜scroll-view＞“ 超出高度出现的滚动条（全局或局部均可）
🏆 前端领域优质创作者
08-12 4315
uni-app-去除``超出高度出现的滚动条（全局或局部均可），uni-appscroll-view怎么去除滚动条，uniapp去除scroll-view滚动条的方法，uni-appscroll-view取消滚动条显示，uniapp去除滚动条的方法，uni-appcss去掉容器滚动条，uniapp去除滚动条近期在做一个uniapp项目,进行的时候发现内容超出后右侧滚动条难以隐藏。...
uniapp scroll-view显示滚动条
江拥羡橙的博客
07-31 3026
【代码】uniapp scroll-view显示滚动条。
UniApp 自定义滚动条实现
cj641809386的专栏
06-26 1426
在移动端开发中，系统默认的滚动条往往无法满足UI设计的需求。本文将详细介绍如何在UniApp中实现一个完全自定义的滚动条，该滚动条不仅外观可控，还能根据内容比例动态调整宽度，提供更好的用户体验。
轻松在uni-app中去掉编译后微信小程序的滚动条-告别无用属性&最终解决方案
m0_52952413的博客
02-02 3773
首先如果你使用的是页面级滚动，即使uni-app中的pages.json中有相关配置，在编译到小程序中也是没有效果的，因为小程序原生不支持，如下：那么在uni-app页面滚动是不是scroll-view，答案是的，但是我们没办法在顶层设置，因为官方没有暴露相关api，那么要想去掉滚动条，我们就只能在自己的页面使用scroll-view视图组件，取代全局的滚动视图。下面上简易代码效果图：如果你的组件不是占满全屏，比如有头部导航。
【uniapp】uniapp中使用scroll-view时，可以滚动，但是不显示滚动条
小黄呀呀呀的博客
04-18 6981
uniapp中使用scroll-view时，可以滚动，但是不显示滚动条，参考博主强制修改 https://blog.youkuaiyun.com/LJJONESEED/article/details/123986312 /deep/ ::-webkit-scrollbar { //滚动条整体样式 display: block; width: 10px !important; height: 10px !important; -webkit-appearance: auto!
uniapp scroll-view隐藏滚动条
weixin_46337813的博客
06-07 397
/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: transpare.
小程序scroll-view安卓机隐藏横向滚动条的实现详解
10-16
这个解决方案的核心是避免在 `scroll-view` 内部使用可能导致额外滚动条的布局方式，同时利用 `white-space: nowrap` 确保内容在一行内显示，从而达到预期的滚动效果。通过这种方式，可以在保持内容布局的同时，成功...
uni-app 用scroll-view实现横向滚动
最新发布
qq_36158551的博客
09-20 789
scroll-view是uni-app内置的可滚动视图区域组件，支持横向和纵向滚动配置。适用于商品横向展示、长列表内容展示等需要局部滚动的场景。核心属性：（1）scroll-x：启用横向滚动（2）scroll-y：启用纵向滚动（3）scroll-top：设置竖向滚动位置（4）scroll-left：设置横向滚动位置scroll-view，必须设置：white-space: nowrap;
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
10-17
2. 为了解决这个问题，可以考虑使用一种“野路子”方法，即在scroll-view外包裹一个高度小于scroll-view高度的容器，这样可以截断滚动条的显示部分，从而达到隐藏滚动条的效果。通过调整外部容器的高度，并结合适当...
uni-app(vue3)动态获取swiper的区域高度以及通过scroll-view实现区域滚动和scroll-view的置顶功能
qq_39691676的博客
04-28 1050
计算方式:swiper高度 = page高度 - tabs高度 - search高度。
修改滑动条的颜色
前端菜鸟
04-12 982
代码例子直接拿走 /*修改滚动条样式*/ /*修改滚动条样式*/ /*修改滚动条样式*/ ::-webkit-scrollbar { width: 8px; height: 100%; } ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shad...
小程序滚动条隐藏（uniapp版本）
qq_53325717的博客
05-03 2958
* 确保scroll-view组件也隐藏滚动条 */单独指定页面隐藏（找到对应的scroll-view）/* 为页面添加隐藏滚动条样式 *//* 全局隐藏滚动条样式 *//* 其他样式保持不变 *//* 全局隐藏滚动条 */
uni-scroll-view隐藏滚动条
weixin_38373875的博客
07-10 8467
uniapp中 ，uni-scroll-view隐藏滚动条的方法 /deep/.uni-scroll-view { background-color: #fff; } /deep/.uni-scroll-view::-webkit-scrollbar { /* 隐藏滚动条，但依旧具备可以滚动的功能 */ display: none } 其他的方法同样适用 效果图 ...
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:.
CSS实现隐藏滚动条但可以滚动
qq_54334713的博客
08-31 1913
本文提供了，如何实现隐藏滚动条但可以滚动的方法
uniapp scroll-view 在ios端隐藏滚动条
hello917的博客
05-12 2471
只需要在对应页面style标签下添加 /deep/.uni-scroll-view::-webkit-scrollbar { /* 隐藏滚动条，但依旧具备可以滚动的功能 */ display: none }
uniapp中的scroll-view滚动条
03-08 1万+
官方示例：https://uniapp.dcloud.io/component/scroll-view 效果图： 实现代码： <template> <view> <scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 300rpx;" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" scroll-with
使用uniapp中的scroll-view组件强制隐藏滚动条
Working_hard_111的博客
04-26 1924
根据uni官方给的文档显示，scroll-view的隐藏属性show-scrollbar为false，在开发中真机链条时没有发现滚动条，小程序发布后，别人手机上显示滚动条。发现问题为：ios显示未发现滚动条，Android系列会显示滚动条，且将scroll-view的show-scrollbar改为false时，依旧解决不了该问题。在查询资料后，总结出该问题的解决方案。设置后滚动条就不见了。
uniapp 自定义scroll-view滚动条
weixin_47517731的博客
01-15 1679
【代码】uniapp 自定义scroll-view滚动条。
uni-app 设置scroll-view 竖向滚动条的开始位置
10-17
在uni-app中，如果你想要设置`scroll-view`竖向滚动条的开始位置，通常情况下，`scroll-view`组件的`scroll-top`属性可以用来控制滚动条初始显示的位置。但是，直接设置`scroll-top`可能会导致滚动条的样式问题，如...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值