IOS 中 表单获取焦点后，外部元素对 scrollTop 赋值不生效

场景

在微信活动页中，页面底部有一块留言区，当输入框获得焦点，软键盘会弹起并将其遮挡

为了避免被遮挡，可以利用JS调整滚动条位置。

测试机型

• IPHONE 6 PLUS IOS 9.3.3

• 魅族 MX5 android 5.1

• Window 7 Chrome 58.0.3029.81

代码

// 等软键盘先出现再执行

setTimeout(()=>{

el.scrollTop = el.scrollHeight

},300)

}

问题

在非 IOS 中，可以正常实现滚动到底部。

而 IOS 中，由于当前输入框获取了焦点，导致这种方案不生效。

解决方案

方案一

先让输入框失去焦点，再设置 scrollTop 的值，再获取焦点。

用户容易看到软键盘来回弹，体验不好。

方法二

 {
      // scrollIntoView 兼容主流移动设备
        e.target.scrollIntoView(true)
    },300)
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!