在聚焦輸入時，在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的本地測試服務器之間存在一些不兼容性。 🤷