在聚焦输入时，在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的本地测试服务器之间存在一些不兼容性。 🤷