iOS12的H5页面不下滑两种处理

最新推荐文章于 2024-11-08 15:00:09 发布

cubiclqb

最新推荐文章于 2024-11-08 15:00:09 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u010001360/article/details/88239401

本文介绍了解决H5页面中键盘弹起导致页面滚动的问题，提供了两种处理方式：一是通过JS代码调整，利用window.scrollY变化来判断键盘弹起并复原滚动位置；二是通过APP原生代码进行调整。

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

第一种处理：H5中JS代码调整

在这里插入图片描述
原理就是弹起键盘的时候，window.scrollY会从0变到键盘的高度，当输入框焦点失去后让scrollY回到0就好了。

第二种处理：APP原生代码调整

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cubiclqb

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

H5在iOS上的滚动兼容问题

LiAly66的博客

01-16

1433

H5在iOS上的滚动兼容问题

IOS微信下问题2 页面滚动失效

dk123sw的博客

01-11

917

建议先看这篇文章 (-webkit-overflow-scrolling:touch) 下面说一下点击其他区域，再在滚动区域滑动，滚动条无法滚动这个bug 问题复现：由非滚动区域向滚动区域滑动，再迅速滑动滚动区域，此时滚动会出现bug 在一个可上下滑动的区域，滚动条在最上面再向上滑动或滚动条在最下面再向下滑，松手后立即滑动滚动区域，滚动出现bug ...

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

解决微信浏览器公众号h5页面ios苹果机不能上下滑动

天弃的博客

11-08

5178

这个月做个项目，要求做个h5，然后放到微信公众号里使用。开发完部署之后发现苹果机的页面是不能上下滑动的，好像写了个fixed固定住了似的，但是有意思的是，两个手指头按屏幕滑动是可以滑动的，两个手指头放上去右侧会显示滚动条，有滚动条就会滑动，滚动条消失滑动不了。因为我们以前几乎都是用uni-app做的H5，所以打的包都是人家uniapp打了自己的东西弄好的，部署直接可以滑，但是我们这次是自己搭的框架（我们直接建的vue项目），所以部署之后遇到了问题。起初刚开始只能百度搜，但是百度搜出来的答案，

h5页面内嵌到app,解决ios无法使用左右侧滑返回上一页

weixin_67898309的博客

02-01

2539

vue+vant组合开发的h5页面，嵌入多个app,其中安卓手机都可实现侧滑返回上一页，而苹果端不行，app本身不展示title顶部的返回箭头

H5网页在ios系统里滑动卡顿

css_666的博客

01-04

1289

H5网页在安卓系统里滑动还是挺流畅的，但是在苹果手机里面会异常的卡顿，优化方案如下： overflow:auto; /* 用于 android4+，或其他设备 */ -webkit-overflow-scrolling:touch; /* 用于 ios5+ */ 注意：这段代码一定要加在最外层的容器里。例如webpack中常用的app，或者html,body中。 ...

坑！！！高清解决方案导致iOS 上h5页面滑不动的解决办法

wangweiscsdn的博客

11-11

5871

首选这个问题出现在我们一个h5页面的首页上，滑不动！在iPhone X和iPhone 11上并且系统版本发现是13.2.2，而iPhone X Max 系统版本12.2的并没有出现。所以我估摸着应该是iOS系统版本13.0以上都会有问题。然后写了个监听容器滚动的方法，也是参考别人的代码：https://blog.youkuaiyun.com/qq_39198420/article/details/76...

移动端H5页面遇到的问题总结

非梧不栖11的博客

01-20

724

最近刚做完一个移动端的项目，产品之无敌，过程之艰辛，我就不多说了，记录下在这个项目中遇到的问题，以防万一，虽然这些可能都是已经被N多前辈解决掉了的问题，也放在这里，算是为自己漫漫前端路铺了一颗小石子儿吧，也在文末留下自己未能解决的疑问，希望看到的朋友能解惑。　　都知道做移动端的开发，在电脑上调试好了的东西，放在手机里可能真的秒秒钟就炸了，我发誓绝对没想到炸的这么快。。。　　1、IO

移动端H5页面关于软键盘的一些踩坑记录

this_ITBoy的博客

08-27

4817

最近一个项目需要做一个留言的功能，需求很简单，点击留言按钮底部弹出留言框，然后发送留言给后台就行了，还有一个就是页面要实现复制功能。讨论需求的时候我预想到了手机上软键盘的弹出可能会有一些bug，不过需求比较急，就想着先做完再来改呗。很快做完之后，在电脑上测了没毛病，提测之后，bug刷刷的就来了： 1、手机ios或者Android微信，点击留言弹出输入框，点击完成或者收起按钮，或者安卓手机点击自带...

H5 下拉刷新如何实现

2401_84190925的博客

04-23

1397

本文讲解了下拉的原理、并根据原理写出初始代码。在初始代码的基础上，我解决了 6 个缺陷、做了 2 个优化，实现了一个完善的下拉刷新效果。链接：https://juejin.cn/post/7340836136208859174。

swiper和scroll-view冲突 ios

最新发布

03-17

以上两种方式均有助于降低两者间潜在的竞争关系强度。 #### 3. 彻底移除滚动条显示干扰视觉体验除了功能性层面外，有时即使解决了技术难题仍可能存在外观方面的小瑕疵——即滚动条的存在感破坏整体界面美观程度。...

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

fly_wugui的博客

05-07

6632

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

h5 ios 滚动到底部_【移动端H5开发】iOS下页面底部的input被弹出键盘遮挡问题

weixin_39970668的博客

12-21

551

状况在iOS下，如果页面底部有个input输入框，那么在input获得焦点，弹出虚拟键盘时，有一定的几率，input会被虚拟键盘给遮挡住，体验很糟糕。尤其是第三方输入法，这个出现的几率极高。这其实已经是一个老生常谈的问题，从早期的iOS版本一直持续到现在iOS11都是这样，感觉上像是iOS的bug，但是不知道为什么一直没有解决。打印日志观察，发现键盘弹出后，页面窗口是变矮了，然后页面滚动到底部，...

h5页面解决ios滚动条生涩，不能滚动的问题-react篇

weixin_43956521的博客

06-20

1626

背景：h5页面有滚动条的场景，在ios手机或者微信上面滚动显得生涩 css解决： -webkit-overflow-scrolling:touch; -webkit-text-size-adjust:none; 场景页面有两层滚动条嵌套，（页面滚动，并且弹窗滚动条也可以滚动）解决思路：弹窗出现时候页面fixed定位，弹窗上面滚动条通过获取原生属性scrollTop设置为0，默认滚动条在最顶部 react解决： this.scrollBox = React.createRef() this

iOS设备在浏览器的键盘出现会将H5页面上顶，下不来底部的bug

weixin_43983711的博客

12-11

558

blur 事件 blurClick() { window.scroll(0, 0); // },

H5页面safari浏览器底部遮挡问题解决方案亲测有效

_web_Z的博客

09-11

2761

H5页面safari浏览器底部遮挡问题解决方案亲测有效

移动端h5禁止页面滚动

peade的博客

09-23

2127

在做H5页面，发现在ios下，存在以下的现象： A,B两个兄弟元素，A覆盖在B上面。在A上面滑动手指，会引起B元素内部滚动。 body元素和内部元素。内部元素A绝对定位在上面。在A上面滑动手指，body会滚动。针对 1 情况，目前没想到解决方法。针对 2 情况，解决方法如下：简单处理 overflow方案 export const bodyScroll={ stop(){ document.body.style.overflow='' }, restore(){

ios H5页面滚动适配问题

CZDBGSY的博客

08-30

677

1.取消页面整体回弹效果；问题：滑动时候会卡主不动，短暂静止后或者点击屏幕后可以继续滑动。但并未解决我的问题，我的是框架页面嵌套过多，导致的多层滚动嵌套。可以使用document.body动态开关。给body标签加上fixed就好。将展示的页面的所有父元素溢出隐藏。

前端h5或者app小程序页面，苹果手机打开页面无法上下滑动

m0_59866374的博客

11-08

457

解决苹果手机无法上下滑动页面，h5，小程序，app！

h5中弹框出现后禁止页面滚动

小小•愿望的博客

10-24

3551

在写带有遮罩层的弹窗时，弹窗出现时，弹框后面的页面依然会保持滚动状态，其实这种情况并么什么影响，但是有很多时候想禁止滚动。无论在移动端还是PC端都会遇到这种情况。在写带有遮罩层的弹窗时，弹窗出现时，页面会保持滚动状态，不符合我们的预期看了些解决方案，大都是改变body的overflow，但是由于滚动条出现和消失，页面也会出现跳动。

iOS与H5交互的两种方法深入解析

1. **UIWebView和WKWebView的区别：** UIWebView是iOS旧版中的WebView组件，由于性能和安全性的问题，在iOS9之后苹果已经不再推荐使用，并在iOS12之后完全废弃。而WKWebView则是苹果从iOS8开始推荐使用的Web视图组件...