前端h5页面，ios手机软键盘弹出来，导致局部页面滚动卡顿、整体页面滚动，解决方案。

布局:
div class=‘app’
input id=‘searchInput’ /
div class=‘content’ /div
/div

.app {
position: relative;
overflow: hidden;
height: 100%;
}
input {
width: 100%;
position: fixed;
top: 0;
z-index: 100;
}

.content {
height: calc(100% - 1.76rem); 减去输入框的高度，只使文本域滚动
overflow-x: scroll;
}
js 解决方案
组件加载的时候
mounted(){ //react是componentDidMount
window.addEventListener(‘scroll’, this.handleScroll,true);
} ,监听滚动事件

在方法里面让input失去焦点，软键盘会收起。
methods: {
handleScroll(){
const input = document.getElementById(“searchInput”);
if(document.hasFocus()){ // 返回值是true或false ,当前input是否聚焦状态。
input.blur(); //让input输入框失去焦点，键盘下去
}
},
}

beforeDestroy() {
window.removeEventListener(‘scroll’, this.handleScroll,true);
},