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"

你可能感兴趣的:(html5)