在移动版 Safari 中显示键盘时防止屏幕向上滚动

Question

我正在构建一个 Angularjs 应用，在一个视图的底部有一个。

iOS9 上的移动 Safari 中的问题：聚焦文本区域时，会显示软键盘并覆盖视图的下部。

如何在键盘可见时向上滚动页面以不覆盖内容（即文本区域）？

Answer 1

这是一种可以防止滚动的方法。当输入内容处于焦点位置时，将 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，然后将值设置到所需位置。

在移动版 Safari 中显示键盘时防止屏幕向上滚动

Prevent screen scrolling up when keyboard is shown in mobile Safari

javascript

mobile-safari

ios

angularjs

ios9