移动 Safari 中的 scrollTop 不起作用答案

【问题标题】：scrollTop in mobile Safari not functioning移动 Safari 中的 scrollTop 不起作用
【发布时间】：2012-10-24 02:28:51
【问题描述】：

我花了最后一个小时阅读了关于缩放和.scrollTop() 的众多问题以及处理的变化，并尝试了至少 20 种不同的东西——所有东西看起来甚至对我的情况都是远程可行的，但我仍然只有部分解决方案。

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

情况是，在单击按钮并显示另一半窗体后，窗口仍处于放大状态，而您正在查看页面的随机补丁。

据我想象，可能有两种处理方式：
1) 点击按钮后实际缩小
2) 滚动到表单下一部分的显示位置

我尝试了所有我能找到的缩小和处理meta 标记中的viewport content width 的方法，但没有为我处理它，因为它只是使视口变大或变小，实际上并没有缩放完全没有。这可能适用于其他人，但不适用于我，因为我已经有了很多样式，这可能使这不是一个选择。

我已经选择了滚动解决方案，.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

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

【问题讨论】：

一定喜欢 Safari Mobile 缩放。 $(window).scrollTop 可能认为它在页面顶部，因为 JS 不处理缩放。您可以尝试只向下移动表单而不是向上滚动视口？

标签： jquery mobile-safari scrolltop

【解决方案1】：

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

如果你的容器上有position: fixed，scrollTop 也可能不起作用。

【讨论】：

【解决方案2】：

你尝试过使用锚点吗？

它们应该适用于任何地方，因为它们是浏览器的原生功能。

带有此代码here的原始帖子

$(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;
      }
    }
  });
});

【讨论】：

【解决方案3】：

不需要使用jquery来做到这一点：

window.scrollTo(0, 0);

您还可以使用元标记来防止一起缩放：

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

您可能只想在遇到问题的页面上执行此操作？

【讨论】：