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

一般情况下，在移动端点击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: 当前元素在视窗的可见范围内不可见，元素将尽量滚动到父元素可视区域距离最近的一边