jQuery Mobile 滚动到焦点元素

Question

我正在开发一个使用 jQuery 移动弹出窗口小部件的 jQuery 移动网站。在我的弹出窗口中，我有几个表单元素。如果内容无法在屏幕上显示，我将弹出窗口配置为在 y 轴上滚动。

我遇到的问题是，当用户在移动设备上并选择弹出窗口底部的表单元素时， native 键盘会切断用户刚刚选择的表单元素。

我意识到用户可以再次手动滚动到该元素，但是，我想让它为用户提供更好的体验。我认为解决此问题的唯一方法是在用户将元素置于焦点后以编程方式滚动到每个表单元素。下面是我一直在编写的代码，但是我无法让它工作。我的控制台日志不断显示以下错误:

Uncaught TypeError: Cannot read property 'top' of undefined

这是我正在使用的代码:

$('#popup input, #popup textarea').focusin(function() {
    var container = $('#popup'),
    scrollTo = $(this);

    container.scrollTop(
        scrollTo.offset().top - container.offset().top + container.scrollTop()
    );
});

有谁知道这个问题的解决办法吗？

Answer 1

我使用了错误的目标。我的原始代码使用 $(this) ，它应该使用 $(e.target) 代替。

$('#popup input, #popup textarea').focusin(function(e) {
        var container = $('#popup'),
        scrollTo = $(e.target);

        container.animate({
            scrollTop: scrollTo.offset().top
        }, 300);    
});

这段代码只起到了部分作用。我必须在窗口调整大小事件上使用相同的代码，以便在键盘滑出时捕获正确的偏移量