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

Posted 2023-05-06

【中文标题】输入焦点时在 iOS（和所有移动设备）上的自定义滚动

【英文标题】：Custom scrolling on iOS (and all mobile devices) when input is focused

【发布时间】：2018-05-17 09:24:42

【问题描述】：

问题：

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

我希望它可以在 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

问题是试图改变默认滚动行为

你可以尝试使用位置而不是偏移量吗？

【参考方案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 的本地测试服务器之间存在一些不兼容。 ?