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

最新推荐文章于 2022-10-24 06:00:00 发布
最新推荐文章于 2022-10-24 06:00:00 发布
阅读量1.7k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010001360/article/details/88239401
版权

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

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

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

在这里插入图片描述

cubiclqb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
h5页面在安卓手机浏览器上不能上下移动的问题
fly_wugui的博客
05-07 5964
1、当在css中加入下面样式，会导致页面无法正常上下滑动 // css 文件 { touch-action: none; } 这行代码后，会导致页面无法正常上下滑动， 解决办法：修改为默认值{ touch-action: auto; }或者删除改行样式 原因： CSS属性 touch-action 值说明： auto 当触控事件发生在元素上时，由浏览器来决定进行哪些操作，比如对viewport进...
h5 ios 滚动到底部_【移动端H5开发】iOS下页面底部的input被弹出键盘遮挡问题
weixin_39970668的博客
12-21 448
状况在iOS下，如果页面底部有个input输入框，那么在input获得焦点，弹出虚拟键盘时，有一定的几率，input会被虚拟键盘给遮挡住，体验很糟糕。 尤其是第三方输入法，这个出现的几率极高。这其实已经是一个老生常谈的问题，从早期的iOS版本一直持续到现在iOS11都是这样，感觉上像是iOS的bug，但是不知道为什么一直没有解决。打印日志观察，发现键盘弹出后，页面窗口是变矮了，然后页面滚动到底部，...
解决微信浏览器公众号h5页面ios苹果机不能上下滑动
天弃的博客
11-08 4627
这个月做个项目，要求做个h5，然后放到微信公众号里使用。开发完部署之后发现苹果机的页面是不能上下滑动的，好像写了个fixed固定住了似的，但是有意思的是，两个手指头按屏幕滑动是可以滑动的，两个手指头放上去右侧会显示滚动条，有滚动条就会滑动，滚动条消失滑动不了。 因为我们以前几乎都是用uni-app做的H5，所以打的包都是人家uniapp打了自己的东西弄好的，部署直接可以滑，但是我们这次是自己搭的框架（我们直接建的vue项目），所以部署之后遇到了问题。 起初刚开始只能百度搜，但是百度搜出来的答案，
H5网页在ios系统里滑动卡顿
css_666的博客
01-04 1208
H5网页在安卓系统里滑动还是挺流畅的，但是在苹果手机里面会异常的卡顿，优化方案如下： overflow:auto; /* 用于 android4+，或其他设备 */ -webkit-overflow-scrolling:touch; /* 用于 ios5+ */ 注意：这段代码一定要加在最外层的容器里。例如webpack中常用的app，或者html,body中。 ...
坑！！！高清解决方案导致iOS 上h5页面滑不动的解决办法
wangweiscsdn的博客
11-11 5405
首选这个问题出现在我们一个h5页面的首页上，滑不动！在iPhone X和iPhone 11上并且系统版本发现是13.2.2，而iPhone X Max 系统版本12.2的并没有出现。所以我估摸着应该是iOS系统版本13.0以上都会有问题。 然后写了个监听容器滚动的方法，也是参考别人的代码：https://blog.csdn.net/qq_39198420/article/details/76...
iOS和H5页面交互拦截
02-22
用于移动端和前端进行交互，H5页面获取iOS端点击事件，iOS端获取H5点击事件，实现实时交互
详解h5页面在不同ios设备上的问题总结
12-13
最近在写嵌入到小程序webview的一个h5页面，是一个文章评论的功能，这个过程中，遇到很多兼容性的问题，在不同机型上的表现也很不一致，所以总结了以下这些问题，记录下来，以便以后查看 1、日期问题 对于yyyy-mm-dd...
iOS app嵌入H5页面的通用模版
02-08
1、解决的问题：Avoiding iOS bug:UIWebView with file input doesn‘t work in modal view controller 2、解决思路:使dismissViewControllerAnimated调用一次，或者让UIDocumentMenuViewController找不到...
浅谈iOS UIWebView对H5的缓存功能
01-06
这两天在搞与H5交互的事，之前做的都是加载的静态的web页面，交互调试起来很快，这次搞的是js写的前端页面，跳转什么的都是动态的，然后就不响应了，搞了半天原来是缓存的问题，这里简单介绍一下，一般请求会使用...
混合开发-h5页面与ios、安卓之间的通信（H5篇）
01-20
混合开发-h5页面与ios、安卓之间的通信（H5篇） WebView(网络视图)能加载显示网页，可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页 首先你需要判断是哪端 使用navigator.userAgent获取浏览器属性 下面...
h5页面解决ios滚动条生涩，不能滚动的问题-react篇
weixin_43956521的博客
06-20 1460
背景：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 475
blur 事件 blurClick() { window.scroll(0, 0); // },
移动端h5禁止页面滚动
peade的博客
09-23 1782
在做H5页面，发现在ios下，存在以下的现象： A,B两个兄弟元素，A覆盖在B上面。在A上面滑动手指，会引起B元素内部滚动。 body元素和内部元素。内部元素A绝对定位在上面。在A上面滑动手指，body会滚动。 针对 1 情况，目前没想到解决方法。 针对 2 情况， 解决方法如下： 简单处理 overflow方案 export const bodyScroll={ stop(){ document.body.style.overflow='' }, restore(){
h5中弹框出现后禁止页面滚动
小小•愿望的博客
10-24 2951
在写带有遮罩层的弹窗时，弹窗出现时，弹框后面的页面依然会保持滚动状态，其实这种情况并么什么影响，但是有很多时候想禁止滚动。无论在移动端还是PC端都会遇到这种情况。在写带有遮罩层的弹窗时，弹窗出现时，页面会保持滚动状态，不符合我们的预期看了些解决方案，大都是改变body的overflow，但是由于滚动条出现和消失，页面也会出现跳动。
【H5】阻止h5移动端弹窗页面弹层出现后禁止弹层下方页面滑动
疾术客
09-08 1927
摘要：昨天写页面的时候遇到了这样一个问题，有一个页面是有弹层出现的，弹层的内容高度不定。所以就给弹层设置了一个最大高为屏幕 的80%，内容高度超出这个高度则给弹出层添加overflow:hidden属性。实现弹出层内容在弹出层内部实现滑动的效果。但是问题也就 这样产生了。弹出层的下面页面也是能滑动，并且有时候会和弹出层内部的滑动出现冲突问题。 思路： 1.通过给body设置overflow:hidden属性去隐藏超出手机屏幕的内容，以实现弹出层下页面滑动的问题 2..
H5页面在 ios 端滑动不流畅的问题
马优晨
07-08 1822
body { overflow-x: hidden } XXX{ //滚动的容器 overflow-y: auto } 解决办法： 给 body 元素添加overflow-x：hidden。然后在滚动容器内加overflow-y: auto
h5页面在ios上无法滑动与z-index无效的情况
yixiancheng的博客
10-19 2763
ps：俩问题产生的原因是引用了scroll.js文件 问题一：无法滑动 scroll.js文件禁用了滑动事件，在不需要scroll方法的时候，解除禁用即可。 /***滑动限制***/ stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow=...
ios内嵌h5返回上一页后空白触屏一下或者拉动一下,才会显示的问题
weixin_41143662的博客
05-21 5191
移动端开发react vue项目中，ios上点击返回的时候，会出现空白现象，触屏一下或者拉动一下,才会显示出来 也查找过很多资料，但都实现不了，包括#app设置为 position:absolute 也不行 最后在生命周期总 updated的时候强制改变scorllTop updated() { document.scrollingElement.scrollTop = 0 ...
关于ios 12.0下 网页键盘顶上去页面 收起键盘后页面不下去
qq_20759961的博客
12-21 4863
在iosAPP里面嵌入含有表单的页面时，遇见了表单聚焦被顶上去，但是失去焦点后并没有下来，引起表单错位，操作错误的问题。这个时候可以使用js控制页面滑动到顶部，当表单失去焦点时，触发事件。如下所示： // 滑动到顶部 window.scroll(0, 0); //滑动到底部 window.scrollTo(0, document.documentElement.clientHeight); ...
OS App 嵌入 H5页面，H5页面怎么跟IOS通讯？
最新发布
07-15
在 iOS App 中嵌入 H5 页面后，你可以通过以下几种方式实现 H5 页面与 iOS App 的通信： 1. JavaScriptCore：使用 JavaScriptCore 框架可以在 iOS App 中执行 JavaScript 代码，并且可以通过 JavaScriptCore 提供的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值