uniapp 隐藏scroll-view的滚动条

最新推荐文章于 2025-05-03 22:49:30 发布

空&白

最新推荐文章于 2025-05-03 22:49:30 发布

阅读量173

点赞数 3

分类专栏： uniapp css 文章标签： uni-app javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_32707555/article/details/143947460

版权

uniapp 同时被 2 个专栏收录

79 篇文章

订阅专栏

css

19 篇文章

订阅专栏

<scroll-view class="scroll"></scroll-view>
<style scoped>
	.scroll /deep/ ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

空&白

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp [全端兼容] - 详细实现scroll-view滚动视图区域强力隐藏去除滚动条，兼容“安卓/苹果“手机系统真机完美去掉横向和纵向滚动条效果，解决苹果ios真机无法隐藏去掉滚动条问题！

王二红

04-01

4510

uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，可滚动视图区域组件，scroll-view，滚动条，去除，隐藏，横向滚动条，纵向滚动条，安卓手机，苹果ios手机，无法去除隐藏滚动条，苹果安卓滚动条隐藏，ios苹果无法隐藏，没效果无效，真机出现滚动条如何隐藏，在安卓机上出现横向滚动条的解决办法，滚动视图隐藏横向滚动条，有滚动条怎么办，就是隐藏不掉，微信小程序去除隐藏去掉scroll-view滚动条，苹果ios系统手机去除，如何去掉滚动条，无法去掉io

uniapp scroll-view显示滚动条

江拥羡橙的博客

07-31

2780

【代码】uniapp scroll-view显示滚动条。

参与评论您还未登录，请先登录后发表或查看评论

uniapp中scroll-view滚动条的显示与隐藏

void_hj的博客

09-24

2648

一，通常情况下都是在app.vue中全局隐藏滚动条。二、在某个特定的页面显示滚动条。

Uniapp当中的scroll-view滚动条不出现或者触底刷新事件不触发

学习记录

03-13

1796

检查容器高度是否有效设置审查全局 CSS 是否覆盖滚动条样式验证子元素布局是否符合滚动方向要求分平台调试并添加兼容性代码通过上述方案，可覆盖 90% 的滚动条异常场景。具体实现需结合业务逻辑调整（如动态高度计算或分页加载优化）。

uniapp隐藏scroll-view滚动条

smileKH的博客

03-24

2915

uniapp scroll-view

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:.

uni-app scroll-view隐藏滚动条的小细节兼容主流浏览器

深夜听表

05-02

1399

想写个横向滚动的列表适配浏览器，主要就是隐藏一下滚动条在手机上美观一点。也并非标准写法，要想在firefox和IE生效可参考如下写法。解决很简单，目标标签加上空格div就行了，顺便。但是使用uni-app官方文档建议的。F12看了一下，原来编译到浏览器端时。生效了，只是生效的地方错了,在目标标签时发现没生效。下自动套了几层div，

使用uniapp中的scroll-view组件强制隐藏滚动条

Working_hard_111的博客

04-26

1826

根据uni官方给的文档显示，scroll-view的隐藏属性show-scrollbar为false，在开发中真机链条时没有发现滚动条，小程序发布后，别人手机上显示滚动条。发现问题为：ios显示未发现滚动条，Android系列会显示滚动条，且将scroll-view的show-scrollbar改为false时，依旧解决不了该问题。在查询资料后，总结出该问题的解决方案。设置后滚动条就不见了。

微信小程序 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 简单实现 u-tabbar效果

iOSTianNan的博客

08-25

1233

动画开启才有用, 这个好像官网没讲, 也是百度才知道的…实际上,还需要再 v-for的子item上添加。那就在item外层再套个view, 给他设置。属性尝试过,方案较难实现。那有人要说, 我要用。

uniapp利用scroll-view实现左边按钮定位右边页面滚动

m0_62217360的博客

11-28

3031

uniapp利用scroll-view实现左边按钮定位右边页面滚动

uniapp之屏幕右侧出现滚动条去掉、隐藏、删除【好用！】

m0_49714202的博客

12-16

7144

uniapp之屏幕右侧出现滚动条去掉、隐藏、删除【好用！】

uniapp scorll-view隐藏滚动条

大炮哥的博客

06-14

385

【代码】uniapp scorll-view隐藏滚动条。

小程序滚动条隐藏（uniapp版本）

最新发布

qq_53325717的博客

05-03

983

* 确保scroll-view组件也隐藏滚动条 */单独指定页面隐藏（找到对应的scroll-view）/* 为页面添加隐藏滚动条样式 *//* 全局隐藏滚动条样式 *//* 其他样式保持不变 *//* 全局隐藏滚动条 */

uniapp 必备css 全局隐藏滚动条

情随事迁个人博客

04-01

191

::-webkit-scrollbar { display: none; /* 隐藏滚动条 */ width: 0 !important; /* 可选，滚动条宽度为0 */ height: 0 !important; /* 滚动条高度为0 */ -webkit-appearance: none; /* 移除默认滚动条样式 */ background: transparent; ...

uniapp中如何隐藏 scroll-view 的滚动条

weixin_61769998的博客

12-01

1234

1.找到项目的App.vue文件然后在style标签里面添加如下代码，可以根据不同平台控制不同标签的属性。2.我们还可以在App.vue的style里面添加如下代码这种办法可以控制所有的滚动条。

uniapp scroll-view滚动条不显示及IOS中问题

細水、長流√的专栏

02-27

4491

最近在对小程序进行一些优化，发现 scroll-view 的两处问题1、IOS手机下scroll-view会存在上拉加载时卡顿情况2、IOS手机下scroll-view会存在点击不触发 navigator-hover 里的css没有找到什么好的解决办法，故只有用view替代了scroll-view。

滚动条详解：跨平台iOS、Android、小程序滚动条隐藏及自定义样式综合指南

JINGWHALE

04-21

4184

随着用户界面体验提升的要求，滚动条自定义样式以及滚动条隐藏精致化的需求日渐增加，本文详细介绍了小程序、iOS、Android平台滚动条的隐藏方法，以及滚动条一般自定义样式的方法。在保持界面整洁、避免内容溢出的同时，确保用户能够访问所有信息，提升浏览体验。

uniapp 隐藏scroll-view横向滚动条

06-03

在 uni-app 中，可以使用 `scroll-view` 组件来实现滚动功能。要隐藏 `scroll-view` 组件的横向滚动条，可以通过以下步骤进行设置： 1. 在 `scroll-view` 组件上设置 `scroll-x` 属性为 `true`，表示允许横向滚动。 2. 在 `scroll-view` 组件上设置 `scroll-with-animation` 属性为 `false`，表示滚动时不使用动画效果。 3. 在 `scroll-view` 组件上设置 `style` 样式，将 `overflow-x` 属性设置为 `hidden`，表示隐藏横向滚动条。示例代码如下： ```html <scroll-view scroll-x="true" scroll-with-animation="false" style="overflow-x: hidden;">  </scroll-view> ``` 这样设置后，`scroll-view` 组件的横向滚动条就会被隐藏起来。需要注意的是，虽然用户看不到横向滚动条，但是用户仍然可以通过手势或鼠标滚轮进行横向滚动。如果需要禁止横向滚动，可以在 `scroll-view` 组件上设置 `disable-scroll` 属性为 `true`。