移动端软键盘弹起遮挡输入框

一般情况下,在移动端点击input框,弹出软键盘后,input框会自动滚动到可视区域内

但是当父元素设置了overflow属性,点击input框,input却无法滚动到可视区域内,

虽然手动向上滑动页面将输入框滑到可视范围内,但在一定程度上影响了用户体验

解决方案

const h = document.body.scrollHeight;
window.onresize = function() {
    if (document.body.scrollHeight < h) {
        setTimeout(() => {
            document.activeElement.scrollIntoView({ behavior: "smooth" });
        });
    }}

 

document.activeElement.scrollIntoView(option)   

尽可能(向上或向下)滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素

option为Object类型参数  {behavior: 'auto' | 'instant' | 'smooth',block: 'start' | 'end'}

behavior:定义了元素滚动的行为,

               instant:立即滚动元素,

               smooth:平滑滚动(大部分浏览器不兼容)

block:定义了元素滚动的方向,默认start

          start: 元素的顶部将尽可能滚动到与父元素可见区域顶部对齐的位置,可简写为el.scrollIntoView(true)

          end: 元素的底部将尽可能滚动到与父元素可见区域底部对齐的位置,可简写为el.scrollIntoView(false)

 

Element.scrollIntoViewIfNeeded(option) 此方法是对Element.scrolltoView()的进一步补充

只在当前元素在视窗的可见范围内不可见的情况下,才滚动浏览器窗口或容器元素,最终让当前元素可见。

如果当前元素在视窗中已经可见了,那么这个方法将不做任何处理

option为Boolean类型参数 

         true:当前元素在视窗的可见范围内不可见,元素将尽量滚动到父元素可视区域的中部位置(垂直方向)

         false: 当前元素在视窗的可见范围内不可见,元素将尽量滚动到父元素可视区域距离最近的一边

 

原文地址:https://www.cnblogs.com/caofeng11/p/13439945.html