在聚焦输入时，在iOS（和所有移动设备）上自定义滚动

Question

问题：

当选择输入时，我希望屏幕滚动，以便聚焦输入位于屏幕顶部。

我希望这适用于iOS和所有其他移动设备。

这是目前在iOS上发生的事情：

这就是我想要发生的事情......请注意页面滚动到的位置：

我目前正在尝试的代码是：

$('#input').on('focus focusin', function(e) {
    e.preventDefault();
    $('html').animate({
        scrollTop: $('#anchor').offset().top
    }, 300);
})

此代码在桌面上运行良好，但只要我在iPhone上加载页面，它就会完全停止工作，默认滚动行为会接管 - 如第一个gif中所示。

Answer 1

所以你只需要滚动它，这样输入的顶部就会成为屏幕的顶部？

我在输入上方添加了2个像素的间隙，这样您就可以看到输入顶部的边框了。

$('#input').on('focus', function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $(this).offset().top-2;
    }, 1000);
})

Answer 2

最终弄清楚问题！

经过数小时和数小时的捣乱，我发现问题不在于代码。我的问题中显示的代码完美无缺。

问题恰好是我的本地测试环境（在命令提示符中为python manage.py runserver 0.0.0.0:8000）。

我还没有找到原因。但我确定我在生产和本地测试环境上使用Django 1.11.4和jQuery 3.1.1。那么为什么会出现这个问题超出了我的范围。

我最好的猜测是jQuery和Django的本地测试服务器之间存在一些不兼容性。