Question

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

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

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

未捕获的TypeError：无法读取属性＆＃39; top＆＃39;未定义的

这是我使用的代码：

$('#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);    
});

此代码仅部分工作。我不得不在窗口调整大小事件上使用相同的代码，以便在键盘滑出时捕获正确的偏移量

jQuery移动滚动到焦点上的元素

1 个答案: