iOS iPad键盘打开时固定位置中断

Question

当我点击"搜索表单"文本框字段时,修复了标题上的位置中断.它只是从页面顶部分离(当它固定在那里),并在虚拟键盘打开时开始浮动页面的中间位置.

正常:

破碎:

Answer 1

我非常喜欢这个解决方案(http://dansajin.com/2012/12/07/fix-position-fixed/).我把它打包成一个小jQuery插件,所以我可以:

• 设置哪个父级获取该类
• 设置适用的元素(不要忘记"textarea"和"select").
• 设置父类名称
• 允许它被链接
• 允许它多次使用

代码示例:

$.fn.mobileFix = function (options) {
    var $parent = $(this),

    $(document)
    .on('focus', options.inputElements, function(e) {
        $parent.addClass(options.addClass);
    })
    .on('blur', options.inputElements, function(e) {
        $parent.removeClass(options.addClass);

        // Fix for some scenarios where you need to start scrolling
        setTimeout(function() {
            $(document).scrollTop($(document).scrollTop())
        }, 1);
    });

    return this; // Allowing chaining
};

// Only on touch devices
if (Modernizr.touch) {
    $("body").mobileFix({ // Pass parent to apply to
        inputElements: "input,textarea,select", // Pass activation child elements
        addClass: "fixfixed" // Pass class name
    });
}

编辑:删除不必要的元素

Answer 2

在我们的例子中,一旦用户滚动,这将自行修复.所以这是我们用来模拟滚动的修复:

$(document).on('blur', 'input, textarea', function () {
    setTimeout(function () {
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
    }, 0);
});

Answer 3

基于对这个问题的良好分析，我在 html 和 css 的 body 元素中使用了它：

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

它对我来说非常有用。