Question

我正在构建一个位于一个视图底部的Angularjs应用程序。

iOS9手机游戏中的问题：当聚焦textarea时，显示软键盘并覆盖视图的下半部分。

当键盘可见时如何向上滚动页面以便不覆盖内容（即textarea）？

Answer 1

这是阻止滚动的一种方法。当您的输入处于焦点时，将overflow:hidden添加到文档正文中。

＆＃13;

    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);
    });

＆＃13;

.no-scroll {
    overflow:hidden;
}

＆＃13;

要向上滚动页面，您可以在输入处于焦点时使用document.body.scrollTop并将值设置为所需位置。

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

1 个答案: