输入焦点时在 iOS（和所有移动设备）上的自定义滚动答案

【问题标题】：Custom scrolling on iOS (and all mobile devices) when input is focused输入焦点时在 iOS（和所有移动设备）上的自定义滚动
【发布时间】：2026-02-14 13:30:01
【问题描述】：

问题：

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

我希望它可以在 iOS 和所有其他移动设备上运行。

这就是目前 iOS 上发生的情况：

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

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

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

这段代码在桌面上运行良好，但当我在 iPhone 上加载页面时，它就完全停止工作，并且默认滚动行为接管 - 如第一个 gif 所示。

【问题讨论】：

你能用body代替html吗？喜欢这个$('body').animate({...
@JohnR 试过了，当使用body 代替html 时根本不起作用
你可以试试这个解决方案：*.com/a/9298941/1736186当然把0改成offset().top。在第二个答案中，我可以看到 e.preventDefault() 自从 IOS 8 以来就不起作用了。还有一个我想到的黑客，但它有点难看。使用 setTimeout() 约 300 毫秒（？）延迟来检查 window.scrollTop() 是否等于您想要的。否则重复滚动动画。仅当这是触摸设备时才检查：*.com/a/4819886/1736186
问题是试图改变默认滚动行为
你可以尝试使用位置而不是偏移量吗？

标签： javascript android jquery ios

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

终于解决了问题！

经过数小时的捣乱，我发现问题不在于代码。我的问题中显示的代码运行良好。

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

我还没有查明原因。然而，我已经确定我在生产环境和本地测试环境上都使用 Django 1.11.4 和 jQuery 3.1.1。那么为什么会出现这个问题，我就不知道了。

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

【讨论】：