我正在构建一个在一个 View 底部有一个 Angularjs 应用程序。
iOS9 移动版 safari 的问题: 聚焦文本区域时,会显示软键盘并覆盖 View 的下部。
如何在键盘可见时向上滚动页面,以便不覆盖内容(即文本区域)?
最佳答案
这是一种可以防止滚动的方法。当您的输入处于焦点位置时,将 overflow:hidden
添加到文档主体。
function toArray (collection) {
return Array.prototype.slice.call(collection);
}
function noScroll (event) {
if (event.type === 'focus') {
document.body.classList.add('no-scroll');
}
else if (event.type === 'blur') {
document.body.classList.remove('no-scroll');
}
}
var inputs = toArray(document.querySelectorAll('input'));
inputs.forEach(function(input){
input.addEventListener('focus',noScroll,false);
input.addEventListener('blur',noScroll,false);
});
.no-scroll {
overflow:hidden;
}
要向上滚动页面,您可以在输入处于焦点状态时使用 document.body.scrollTop
并将值设置到所需位置。
关于javascript - 在移动版 Safari 中显示键盘时防止屏幕向上滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33508356/