移动版Safari中的scrollTop无法正常工作

Question

我花了最近一个小时阅读了许多有关缩放和 .scrollTop() 以及不同处理方式的问题，并尝试了至少20种不同的方法 - 所有看起来对我的情况甚至稍微可行的东西，但我仍然只有一个部分解决方案。

我有一个包含三个字段和一个继续按钮的表单。点击继续按钮后，其余部分的表单将打开。当您选择文本字段时，Safari移动版会缩放视图。我并不特别介意这点。如果我防止缩放，那么它可能太小而无法阅读字段，如果我以可读的缩放级别加载，则只能看到页面的一部分，因此缩放行为是可以接受的。

问题在于，按钮被点击后，窗口仍处于缩放状态，并且您正在查看页面的随机区域。

从我的想象中，有两种处理方式：
1）单击按钮后实际缩小
2）滚动到下一部分的表单显示出来的位置

我尝试了所有我能找到的有关缩小并处理 viewport content width 的方法，在 meta 标签中，确实触发了，但对我来说并没有处理好，因为它只是使视口变大或变小，根本没有缩小。可能这适用于其他人，但对我来说不是一个选项，因为我已经有了很多样式。

我已经采用滚动解决方案，.scrollLeft() 工作得很好，但是无论我给它什么选择器，.scrollTop() 都不起作用。我尝试过:

$('body').scrollTop
$('html').scrollTop
$('document').scrollTop
$('body,html,document').scrollTop
$('html:not(:animated),body:not(:animated)').scrollTop
$('html:not(:animated),body:not(:animated),document:not(:animated)').scrollTop
$('#content').scrollTop // that's a wrapper div
$(window).scrollTop

有人知道如何在 Safari Mobile 中让 .scrollTop() 函数正常工作吗？

- Peter Oram

---

一定要喜欢Safari移动版的缩放。$(window).scrollTop可能认为它已经到达页面顶部，因为JS无法处理缩放。你可以尝试将表单向下移动而不是滚动视口吗？ - Matthew Blancarte

Answer 1

我认为你试图用错误的方式解决问题。只需确保您的表单字段在移动视口上具有font-size: 16px，这样Safari就不会放大。

此外，如果您的容器上有position: fixed，则scrollTop可能无法正常工作。

- Zeno Popovici

Answer 2

你尝试使用锚点了吗？

它们应该在任何地方都能工作，因为它们是浏览器的本地函数。

此代码的原始帖子 在这里。

$(function() {
  $('a[href*="#"]:not([href="#"])').on('click', function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

- user2618294

Answer 3

不需要使用jQuery来完成这个操作：

window.scrollTo(0, 0);

您也可以使用元标签完全禁止缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

你可能希望只在出现问题的页面上这样做？

- George Filippakos