在 iOS Safari 中使用 iScroll 和输入时，键盘会将滚动条推到视口上方并卡住

Posted 2023-03-14

【中文标题】在 iOS Safari 中使用 iScroll 和输入时，键盘会将滚动条推到视口上方并卡住

【英文标题】：When using iScroll with inputs in iOS safari the keyboard pushes the scroller above the viewport and get stuck

【发布时间】：2014-06-17 16:25:16

【问题描述】：

有人知道如何解决这个问题吗？我与 Cubiq 的 Matteo 进行了交谈，他的解决方案是使用转换而不是转换。现在，当键盘出现时，我基本上在页面下方添加了键盘大小的填充，但这有一堆新问题围绕着光标被搞砸了：

$('body').on('focus', 'input, textarea', function() 
                console.log('SCROLLER INPUT FOCUS');
                if(!self.getCurrentScroller()) return;
                self.getCurrentScroller().css('padding-bottom', 260);
                self.getCurrentIscroll().refresh();
                self.getCurrentIscroll().scrollToElement(this, 0);
            );

            $('body').on('blur', 'input, textarea', function() 
                console.log('SCROLLER INPUT BLUR');
                if(!self.getCurrentScroller()) return;
                self.getCurrentScroller().css('padding-bottom', 0);
                self.getCurrentIscroll().refresh();
                self.getCurrentIscroll().scrollToElement(this, 0);
            );

这个想法是，如果你在 iscroll 的底部，键盘只会导致 iScroll 卡在视口上方，并且当键盘向上推时没有更多页面可以滚动。

【参考方案1】：

有时虚拟键盘会导致物理滚动发生变化。这样您就可以在键盘隐藏时将其滚动到顶部。

$wrapper.find('input, textarea').on('blur', function (e) 
    $wrapper.scrollTop(0);
);