input框滚动到可视区域

 scrollIntoView

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域。

兼容性：大部分的IOS，和安卓手机都支持

    window.onresize = () => {
          const { activeElement } = document;
          if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
            setTimeout(() => {
              activeElement.scrollIntoView();
            }, 100);
          }
        };

以下这些是从 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView 网站拿过来的，有些参数并没有使用，兼容性情况不太了解。

 语法：

element.scrollIntoView(); // 等同于element.scrollIntoView(true)

element.scrollIntoView(alignToTop); // Boolean 型参数

element.scrollIntoView(scrollIntoViewOptions); // Object 型参数

参数：

alignToTop

一个Boolean值：

• 如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
• 如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。

 

scrollIntoViewOptions 可选 

一个带有选项的object：

{
    behavior: "auto"  | "instant" | "smooth",
    block:    "start" | "end",
}

behavior 可选

定义缓动动画， "auto", "instant", 或 "smooth" 之一。默认为 "auto"。

block 可选

"start", "center", "end", 或 "nearest"之一。默认为 "start"。

inline 可选

"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。