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

最新推荐文章于 2025-04-24 09:25:10 发布

素质白嫖怪

最新推荐文章于 2025-04-24 09:25:10 发布

阅读量1.8k

点赞数 2

文章标签： uni-app 前端

本文链接：https://blog.youkuaiyun.com/Working_hard_111/article/details/130383200

版权

根据uni官方给的文档显示，scroll-view的隐藏属性show-scrollbar为false，在开发中真机链条时没有发现滚动条，小程序发布后，别人手机上显示滚动条。

发现问题为：ios显示未发现滚动条，Android系列会显示滚动条，且将scroll-view的show-scrollbar改为false时，依旧解决不了该问题

在查询资料后，总结出该问题的解决方案

    /deep/ ::-webkit-scrollbar {
	//隐藏scroll-view里面自带的滚动条
	display: block; //必加
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: auto!important;
	background:transparent;
	overflow: auto!important;
	}

设置后滚动条就不见了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

素质白嫖怪

关注关注

2
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

深夜听表

05-02

1406

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

uni-app scroll-view隐藏滚动条

m0_66139866的博客

08-19

1911

uni-app scroll-view隐藏滚动条

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

uniapp+vue 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

2933

uniapp scroll-view

uniapp scroll-view 隐藏滚动条

Lsir1998的博客

05-17

1377

如果是想全局隐藏的话，可以放在App.vue中，如果是局部则在对应的页面中引入使用即可。

关于uniapp

gh4188的博客

11-28

933

uniapp一些介绍

uniapp学习总结

weixin_67850938的博客

06-15

1093

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app组成和跨端原理uni-app能实现一套代码、多端运行，核心是通过编译器 + 运行时编译器：将uni-app统一代码编译生成每个平台支持的特有代码；如在小程序平台，编译器将.vue文件拆分生成wxmlwxssjs等代码。

2021-6月面试总结-vue，uniapp，小程序，h5，更新中

shuux666的博客

03-03

911

**一、**vue 2.6.11 vue****页面的生命周期？总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre

uniapp遇到的问题

weixin_45888412的博客

01-13

2740

uniapp遇到的问题 scroll-view横向滚动 <template> <scroll-view scroll-x="true" class="scrollX"></scroll-view> </template> <style scoped> .scrollX{ width: 100%; overflow: hidden; /* 必须要添加才能生效 */ white-space: n

uniapp scorll-view隐藏滚动条

大炮哥的博客

06-14

392

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

uniapp隐藏scroll-view中滚动条

weixin_56374326的博客

12-11

1223

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

uniapp 隐藏scroll-view滚动条

m0_50080847的博客

08-04

470

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

uniapp 微信小程序隐藏scroll-view滚动条

weixin_41794857的博客

10-28

1251

通过getSystemInfo方法中的platform参数知道pc端微信打开时的平台不是mp-weixin而是webview。找到微信小程序文档中scroll-view视图容器中的webview的特有属性。主要是为了解决pc端微信打开小程序时的滚动条。最后在scroll-view标签中添加。这两个属性隐藏滚动条。

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

王二红

04-01

4546

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

scroll-view在uniapp中隐藏滚动条

Heartnottowake的博客

03-18

557

在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组件隐藏滚动条

qq_47443027的博客

08-29

1666

这时候一般就会隐藏了滚动条，如果还没反应，就重新编译一下。在App.vue的style标签里增加CSS样式。在pages.json增加如下配置。

UniApp + Vue3 + Vite + TS + Tailwind 跳转页面，给跳转的页面设置了 overflow:hidden不管用，还是回滚动

03-15

在UniApp + Vue3 + Vite + TypeScript + TailwindCSS 的项目中，如果你对某个页面设置了 `overflow: hidden` 却仍然可以滚动，可能是以下几个原因导致的： ### 可能的原因及解决办法 #### 1. **未正确应用样式** - 确保你在正确的容器上应用了 `overflow: hidden` 样式。通常需要检查的是根元素 `.page` 或者 `<view>` 容器。 ```html <template> <view class="container">  </view> </template> <style lang="scss" scoped> .container { overflow: hidden; height: 100vh; // 确保高度设置为视口高度 } </style> ``` #### 2. **子组件影响全局滚动** 如果某些子组件或者嵌套的内容有独立滚动条，则可能会忽略外部的 `overflow: hidden` 设置。解决方案：递归检查所有子节点是否也有滚动属性。 #### 3. **Tailwind CSS 冲突** 使用 TailwindCSS 时，可能存在类名覆盖的情况。例如其他地方定义了 `scroll-auto`、`overflow-scroll` 类等。解决方法： - 强制指定重要性：`!important` ```css .no-scroll { overflow: hidden !important; } ``` - 检查是否有冲突类，并移除多余的滚动设置。 #### 4. **硬件加速引起的滚动问题** H5 中部分浏览器会因为硬件加速而保留滚动能力，即使你已经禁用了溢出隐藏。可以用 JavaScript 手动控制文档滚动状态： ```javascript onMounted(() => { document.body.style.overflow = 'hidden'; }); onUnmounted(() => { document.body.style.overflow = ''; }); ``` --- ### 示例完整代码片段 ```vue <template> <view class="fixed-page">  </view> </template> <script setup lang="ts"> import { onMounted, onUnmounted } from "vue"; onMounted(() => { document.body.style.overflow = "hidden"; // 阻止整个 body 元素滚动 }); onUnmounted(() => { document.body.style.overflow = ""; // 还原默认行为 }); </script> <style lang="scss"> .fixed-page { overflow: hidden; /* 屏蔽局部滚动 */ height: 100vh; /* 固定高度到屏幕大小 */ } </style> ``` --- ### 总结如果单纯通过 `overflow: hidden` 来阻止页面滚动无效的话，可以尝试结合 JavaScript 动态修改 DOM 样式以及审查是否存在样式的优先级冲突。