ios页面overflow:scroll;滚动不流畅及手机web页面，软键盘弹出，输入框被遮住

zhisheng 发布于2019-08-29 12:17 / 3332人阅读

摘要：如果是安卓手机则执行这个功能当点击框之后，视口高度发生变化，则软键盘弹出了，这时，调用函数，让顶上去。

在移动端的web开发中，大家会发现，当给一个元素设置overflow:sroll;属性时，在ios端滑动页面，页面滚动的反应很慢，有种卡顿的感觉，但是在安卓端滚动很快，于是这时就有人想到用iscroll.js插件，让页面中有overflow:scroll;属性的元素在ios端和安卓端滚动的都很流畅，是的，这可以解决问题，元素滚动也很流畅，但是，iscroll.js的也经常伴随着很多问题。例如，他会屏蔽页面上的很多点击事件和input框输入问题等等。当然这些都可以解决，但是弊端很多。于是乎，就有了-webkit-overflow-scrolling:touch;属性，来解决ios端带有overflow:sroll;属性的元素，让其滚动很流畅。记住，-webkit-overflow-scrolling: touch;属性要写在有overflow:sroll;属性的元素的样式里。

有时页面里的一个div给他写了固定的高度，也写了overflow:scroll;属性，并且这个div里有很多input输入框，当我点击某一个input时，软键盘弹出，input输入框在安卓端不会自动顶上去，这时测试就会给你提bug了，这就很麻烦了。于是乎，我就写了一个自己的方法，让安卓端的input框自动顶上去，因为在安卓有这个情况，所以做了终端判断，以下代码仅供参考：




    
    
    Document
    
    
    



    
        
            您即将审核通过订单,请您填写结算信息
        
        输入姓名：
        输入年龄：
        输入性别：
        输入民族：
        输入籍贯：
        输入现住地址：
        输入手机：
        输入姓名：
        输入年龄：
        输入性别：
        输入民族：
        输入籍贯：
        输入现住地址：
        输入手机：
    
    确定

截图：

idc机房托管专线服务输入界面软键盘弹出页面页面滚动弹出框被拦截

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111794.html

ios页面overflow:scroll;滚动不流畅及手机web页面，软键盘弹出，输入框被遮住

摘要：如果是安卓手机则执行这个功能当点击框之后，视口高度发生变化，则软键盘弹出了，这时，调用函数，让顶上去。在移动端的web开发中，大家会发现，当给一个元素设置overflow:sroll;属性时，在ios端滑动页面，页面滚动的反应很慢，有种卡顿的感觉，但是在安卓端滚动很快，于是这时就有人想到用iscroll.js插件，让页面中有overflow:scroll;属性的元素在ios端和安卓端...

Object 2019-08-20 15:18 评论0 收藏0
可能这些是你想要的H5软键盘兼容方案

摘要：然而，并没有直接监听软键盘的原生事件，只能通过软键盘弹起或收起，引发页面其他方面的表现间接监听，曲线救国。软键盘收起表现触发输入框以外的区域时，输入框失去焦点，软键盘收起。可以让软键盘弹起后，让焦点元素再次滚到可视区，强迫滚到位。前言最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从...

stackvoid 2019-08-23 17:05 评论0 收藏0
可能这些是你想要的H5软键盘兼容方案

摘要：然而，并没有直接监听软键盘的原生事件，只能通过软键盘弹起或收起，引发页面其他方面的表现间接监听，曲线救国。软键盘收起表现触发输入框以外的区域时，输入框失去焦点，软键盘收起。可以让软键盘弹起后，让焦点元素再次滚到可视区，强迫滚到位。前言最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从...

imingyu 2019-08-05 16:47 评论0 收藏0
ios输入框的坑(软键盘弹出不灵敏、输入法影响弹出高度)

摘要：参考地址首先，是这样的布局父容器里面放一个输入框和一个按钮思路是父容器定位，为，为布局在其他事件触发输入框出现的时候例如一个评论的，父容器值变为，被软键盘顶上来。参考地址： https://segmentfault.com/a/11...https://blog.csdn.net/github_... 1.首先，是这样的布局：父容器里面放一个输入框和一个按钮思路是：父容器fi...

vvpvvp 2019-08-26 10:56 评论0 收藏0
移动常见疑难问题

摘要：是在系列事件发生后大约才触发的，混用和就会导致点透问题。获取视图原始高度方案二能较好地处理滚动的问题。禁止蒙层底下页面跟随滚动原因弹窗是常见的交互方式，而蒙层是弹窗必不可少的元素。平时的开发过程中，经常会遇到一些疑难杂症，在这里记录一下常用的解决方案。 UI小姐姐要求的0.5px线原因：不同手机的兼容不一样，尤其安卓 IOS的Safari表现是比较好的，safari是可以支持浮...

klivitamJ 2019-08-30 15:44 评论0 收藏0