jQuery 移动滚动到焦点元素

Question

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

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

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

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

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

jQuery 移动滚动到焦点元素

jQuery mobile scroll to element on focus

jquery

scrollto

jquery-mobile