uniapp 打包的h5在安卓Android手机滚动条scroll失效

木头没有瓜

已于 2023-12-20 17:54:52 修改

阅读量3k

点赞数 1

分类专栏： uniapp 文章标签：前端

于 2022-06-14 19:44:32 首次发布

本文链接：https://blog.csdn.net/weixin_40918145/article/details/125284800

版权

uniapp 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

看效果

.uniapp 打包的h5在安卓Android手机滚动条scroll不生效

<view class="popup-d">
	这是非常非常长的内容					
</view>

popup-d{
        color: #C54026;
        height: 770upx;
        overflow-y: scroll;
        cursor: pointer;
}

乍一看，在pc和ios上都没有问题，但是在安卓手机上，滚动条却无效

原因：uniapp中，使用滚动条需要用scroll-view标签

<scroll-view scroll-y="true" class="popup-d">
  内容
</scroll-view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

木头没有瓜

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

小程序scroll-view安卓机隐藏横向滚动条的实现详解

10-16

在本问题中，开发者遇到了一个特定于安卓设备的问题，即在使用 `scroll-x` 属性实现横向滚动时，滚动条在安卓机上意外显示。以下是对这个问题的详细解析和解决方案。首先，问题出现在使用了 `flex` 布局的场景下。...

uniapp 手机端滚动不可用问题解决

鱼爱喝可乐的博客

08-30

2109

uniapp 手机端滚动不可用问题解决 H5、小程序页面

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

02-20

8156

scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头

UniappX scroll-view不能滚动问题

最新发布

CZDBGSY的博客

08-02

646

不给scrollview设置高度是不可以滚动的，单纯的flex1页不一定可以，需要添加一个实体高度，让其自动撑开。uniappx里弃用了scroll-x，以及scroll-y属性，用direction属性代替了；如果还是不可以，检查是否有scroll-view嵌套，以及父元素是否有实体高度。

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

細水、長流√的专栏

02-27

3792

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

scroll-view横向滚动无效

qq_45142260的博客

11-29

2294

在scroll-view下的子模块设置 display: inline-block;属性或 display: inline-table【必须】给scroll-view 样式添加 white-space: nowrap;在scroll-view 上设置属性 scroll-x=”true” 横行滚的许可。在scroll-view下的子模块设置不得设置 float: left;给scroll-view 设置固定高度【必须】

H5页面滚动时显示滚动条，不滚动时隐藏滚动条

千里之行，始于足下

04-28

2390

【代码】H5页面滚动时显示滚动条，不滚动时隐藏滚动条。

h5页面在安卓手机浏览器上不能上下移动的问题

fly_wugui的博客

05-07

6234

1、当在css中加入下面样式，会导致页面无法正常上下滑动 // css 文件 { touch-action: none; } 这行代码后，会导致页面无法正常上下滑动，解决办法：修改为默认值{ touch-action: auto; }或者删除改行样式原因： CSS属性 touch-action 值说明： auto 当触控事件发生在元素上时，由浏览器来决定进行哪些操作，比如对viewport进...

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

01-03

在书写网页的时候，往往会为了页面的美观，而选择去掉滚动区域默认的滚动条，而在这里，就是为小程序去掉滚动条的其中的一种方法： scroll-view.wxml: scroll-view.wxss scroll-view.js 最终显示效果如下; ...

Android ListView 滚动条的设置详解及实例代码

08-31

- 在某些Android版本或设备上，滚动条的大小可能不易察觉，但通过设置`android:scrollbarThumbVertical`可以明显观察到效果。 - `android:fastScrollEnabled`属性用于启用快速滚动功能，显示一个滑块，用户可以通过...

详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

10-17

然而，在实际测试中，这些方法可能无法完全隐藏scroll-view组件内的滚动条，尤其是在Android手机上。 2. 为了解决这个问题，可以考虑使用一种“野路子”方法，即在scroll-view外包裹一个高度小于scroll-view高度的...

FastScrollBar:Android快速滚动条，配合listview使用

06-19

关于该项目我试着写一个快速滚动条。您可以轻松地在您的应用程序中使用它。如何使用在您的项目中导入 FastScrollBar.java。例如，将其添加到您的布局中< FrameLayout xmlns : android = " ...

uni-app scroll-view 在安卓手机滚动不流畅原因

weixin_45524809的博客

04-25

1563

使用竖向滚动时，需要给一个固定高度，通过 css 设置 height。

移动端h5页面不能滑动，模拟器可以下滑，问题的解决办法

weixin_44450433的博客

03-10

4074

我是今年才接触html,现在画页面经常也用frontpage辅助，最近粘贴了个页面后，发现没办法再手机上滚动，所以记录一下，也顺便记录下自己的生活。昨天做了很多梦，从上海来这边一年了，诸多不顺，技术也是从后端到前端，因为小地方，后端基本用不上，基本都是短平快的h5，小程序，公众号，很少会想着构建统一的数据服务，什么数据中台就更扯淡了。话不多说，结果导向，好好加油！ 1、H5页面没有使用任何滚动...

overflow:scroll无效

qq_21476953的博客

01-06

5926

可能是禁用了页面滚动: // 禁止浏览器滚动页面 let edit2d = document.querySelector(".edit2d"); edit2d.addEventListener("touchmove", e => { e.preventDefault(); }); <全文结束> ...

scroll-view安卓滚动不生效

DyuanH的博客

07-06

810

参考博客问题 scroll-view竖向滚动，高度为100vh时，在模拟器以及IOS上都正常滚动，在android系统上却无法滚动。解决需要在样式加上overflow-y: scroll;

uniapp中scroll-view滚动失效解决方法

m0_43377799的博客

04-13

4648

uniapp中scroll-view滚动失效解决方法

微信小程序 -- scroll-view组件在ios上无法滑动的坑

weixin_44622984的博客

12-14

7262

当我们的scroll-view组件在页面中使用,且页面.json设置为页面可滑动时或可触发下拉刷新时 "enablePullDownRefresh ": true, "disableScroll":true, 会出现我们的scroll-view组件在ios真机上会出现卡死,无法滑动的问题造成这个的原因是因为ios系统内核允许我们将页面进行下拉,可以拉出一段空白的区域,这个时候如果我们滑动下拉页面,会认为我们是在使用ios的下拉,而不会拉动我们的scroll-view组件要避免这个问题就必须在页面.j

解决小程序和app滚动条的问题--uniapp踩坑

weixin_57844432的博客

08-31

5805

小程序和APP都是用使用scroll-view标签，代码相同，但是效果不同，就觉得很离谱，出现了两类情况，有种两权分立的感觉哈，下面是四种测试情况

uniapp的scroll-view设置滚动条在底部

05-14

要将 scroll-view 的滚动条设置在底部，可以通过以下步骤实现： 1. 在 scroll-view 标签中添加一个 class，例如：`<scroll-view class="scroll-view-class">...</scroll-view>` 2. 在对应的样式文件（如 app.vue 或 index.vue）中添加以下代码： ```css .scroll-view-class::-webkit-scrollbar { display: none; } .scroll-view-class { -ms-overflow-style: none; overflow: -moz-scrollbars-none; } ``` 这段代码的作用是隐藏原生的滚动条，并用伪元素模拟一个自定义的滚动条。如果希望自定义滚动条的样式，可以继续添加 CSS 样式。 3. 在对应的页面中，使用 JavaScript 控制 scroll-view 的滚动位置。可以使用 `scrollTo` 方法将 `scrollTop` 设置为最大值，例如： ```javascript const query = uni.createSelectorQuery().in(this); query.select('.scroll-view-class').boundingClientRect((rect) => { uni.pageScrollTo({ scrollTop: rect.height, // 滚动到最底部 duration: 300, }); }).exec(); ``` 这段代码将 `scrollTop` 属性设置为 scroll-view 的高度，即滚动到最底部。这样就可以将 scroll-view 的滚动条设置在底部了。