javascript - 输入聚焦时在 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);
})