IOS软键盘弹起，顶起页面使其脱离文档流，input失焦后，留下空白问题解决

转载于 2019-01-02 19:27:00 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Lewiskycc/p/10210687.html

本文介绍如何利用HTML5的scrollIntoView属性，通过原生JS API让元素进入视口，实现页面滚动到指定元素位置的效果。适用于解决input失去焦点后页面回滚至可视范围的问题。

Html5的scrollIntoView属性( DOM元素的scrollIntoView()方法是一个IE6浏览器也支持的原生JS API，可以让元素进入视区，通过触发滚动容器的定位实现)

function scrollToView() {
  var element = document.getElementById("box");
  //元素下边框与视窗底部齐平，不传参则表示元素上边框与视窗底部齐平
  element.scrollIntoView(false);
}
document.querySelector('input').addEventListener('blur',function(){
 // 当input失去焦点调用此方法使得页面回到可视范围
 scrollToView();
})