一、关于滚动穿透的问题
滚动穿透是指在移动端当有 fixed 遮罩背景和弹出层时,在屏幕上滑动能够滑动背景下面的内容;
body.modal-open {
position: fixed;
width: 100%;
}
这种方式同样当弹出层弹出时滚动条会丢失,所以还需要使用js来保存滚动条的位置,在关闭弹出层时将滚动位置还原;
var ModalHelper = (function(bodyCls) {
var scrollTop; // 在闭包中定义一个用来保存滚动位置的变量
return {
afterOpen: function() { //弹出之后记录保存滚动位置,并且给body添加.modal-open
scrollTop = document.scrollingElement.scrollTop;
document.body.classList.add(bodyCls);
document.body.style.top = -scrollTop + 'px';
},
beforeClose: function() { //关闭时将.modal-open移除并还原之前保存滚动位置
document.body.classList.remove(bodyCls);
document.scrollingElement.scrollTop = scrollTop;
}
};
})('modal-open');
二、安卓移动端输入框被键盘挡住问题
通过监听当前窗口的resize,判断当前获取焦点的是否为输入框,调用该元素的scrollIntoView(),然后就可以将输入框显示在可视区域内了。
scrollIntoView():让当前的元素滚动到浏览器窗口的可视区域内。
if(/Android/.test(navigator.appVersion)) {
window.addEventListener("resize", function() {
if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
document.activeElement.scrollIntoView();
}
})
}