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

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

Answer 1

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

如果您的容器上有position: fixed，则scrollTop可能无效。

Answer 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;
      }
    }
  });
});

Answer 3

无需使用jquery执行此操作：

window.scrollTo(0, 0);

您还可以使用metatag阻止所有缩放：

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

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

移动Safari中的scrollTop无法正常运行

3 个答案: