解决了键盘在移动终端弹出时阻塞输入框的问题

我最近做了一个移动页面. 输入框位于页面底部. 当我单击输入框以弹出输入法虚拟键盘时，虚拟键盘似乎阻止了输入框，尽管手动滑动了页面输入框滑入了可见范围，但是在一定程度上影响了用户体验. 如果这个问题可以解决，那将是最好的. 我在互联网上检查过. 显然，我不是唯一遇到此问题的人. 该解决方案实际上非常简单，那就是使用许可能没有看到的浏览器本机API.

Element.scrolltoView()

尽可能滚动浏览器窗口或容器元素（向上或向下），以在当前窗口的可见范围内查看当前元素.

三个重载参数:

element.scrollIntoView();

如果未显示和声明任何参数，则等效于element.scrollIntoView（true）

element.scrollIntoView(alignToTop);

布尔类型参数

如果为true，则元素的顶部将尽可能滚动以与父元素的可见区域的顶部对齐. 这是默认值.

如果为false，则元素的底部将尽可能滚动以与父元素可见区域的底部对齐

element.scrollIntoView(scrollIntoViewOptions);

对象类型参数

{

行为: “自动” |“即时” |“平滑”，

block: '开始'|'结束'

}

行为: 定义元素滚动的行为. Instant表示即时滚动元素，而smooth表示平滑滚动. 但是，大多数浏览器都不支持smooth的属性值，该属性值通常是即时的.

block: 定义元素滚动的方向，对应于布尔类型参数，如果设置了起始值，则等效于element.scrollIntoView（true），如果设置了结束值，则等效于element. scrollIntoView（false）

应该注意，无论是滚动到父元素的顶部还是底部，这并不意味着子元素将完全滚动到该位置. 浏览器只是尝试使子元素与父元素的顶部或底部完全对齐，但是您可以滚动到该位置，该位置与父元素的顶部或底部相距一定距离，具体取决于其他元素的布局在页面上.

关于兼容性，MDN表示这是一个实验性API，不在DOM规范中，但是从以前的外观来看，发现几乎所有浏览器都支持此API:

关于MDN的示例如下:

var element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({block: "end", behavior: "smooth"});

Element.scrollIntoViewIfNeeded（）

仅当当前元素在窗口的可见范围内不可见时，才滚动浏览器窗口或容器元素，最后使当前元素可见. 如果当前元素在视口中已经可见，则此方法将不执行任何操作. 此方法是对Element.scrolltoView（）的进一步补充.

有一个布尔类型参数:

Element.scrollIntoViewIfNeeded（opt_center）

如果设置为true，并且当前元素在窗口的可见范围内不可见，则该元素将尝试滚动到父元素可见区域（垂直方向）的中间

如果设置为false，并且当前元素在窗口的可见范围内不可见，则该元素将尝试滚动到父元素可见区域的最近侧. 至于滚动到父元素的顶部还是底部，取决于滚动. 子元素的哪一侧更靠近父元素.

MDN声明此API是非标准方法，并且支持较少的浏览器，但是如果您仅考虑移动终端方案，则可以使用它.

————————————————

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-306867-1.html