以编程方式更改scrollTop后固定定位按钮上的移动Safari错误...？

Question

我刚刚完成一个网页，但 Mobile Safari（iPhone 和 iPad iOS 5.0.1）中有一个错误，有两个按钮固定在右上角和右下角。

这些按钮只有在单击提交后才会淡入在打开页面其余部分的文本框中...加载页面其余部分并且按钮淡入后，您可以单击其中任何一个，它们都可以工作...

但是，单击它们会导致程序化滚动，滚动完成后您将无法再单击在任一按钮上，直到您用手指实际滚动页面，即使只是一个很小的像素滚动...

我注意到的是，在程序化滚动之后，如果您点击“顶部”按钮稍下方，您会看到突出显示，就好像您我们点击底部按钮并处理底部按钮的操作，这告诉我错误是，当以编程方式滚动时，固定位置按钮仍然与页面的其余部分一起移动，并且不会返回到其固定位置，直到实际执行触摸滚动......

有谁知道绕过这个..？

我添加了一个弹出窗口，显示按下了哪个按钮，以便您可以对其进行测试，请记住，在第一次按下向下按钮（有效）后尝试再次按下，它将不起作用，但是单击向上按钮下方，然后您会看到发生向下按钮操作...

http://www.tsdexter.com/ceos

感谢您的帮助。

托马斯

（如果你能指出我可以在哪里向苹果提交错误，那也很好，除非已经有人提交过）

编辑：只需单击任一提交箭头，您不需要输入工资/工资它有默认值

编辑2：这是一个更简单的例子来显示相同​​的问题..

http://www.tsdexter.com/MobileSafariFixedPosBug.html

编辑 3：向 Apple 报告的错误

Answer 1

我们还在 2 个不同的 iPad 应用程序上遇到了这个错误，对我们来说，最好的解决方法是在动画滚动完成后暂时从固定元素中删除固定位置，然后使用 window.scroll 和我们刚刚执行动画的垂直值滚动到，然后最后重新应用位置固定样式。当 ipad 重新渲染元素时，它确实会导致一个非常小的问题，但它比 bug 更可取。

var $fixedElement = $('#fixedNavigation');
var topScrollTarget = 300;
$("html:not(:animated),body:not(:animated)").stop().animate({ scrollTop: topScrollTarget }, 500, "swing", function(evt) {
    $fixedElement.css({ "position": "relative" });
    window.scroll(0, topScrollTarget );
    $fixedElement.css({ "position": "fixed" });
});

Answer 2

我通过添加 101% 高 div 然后（几乎）立即删除它来解决这个问题。

尝试：

<style>
.iosfix {
  height: 101%;
  overflow: hidden;
}
</style>

当你滚动时：

window.scrollTo(0, _NEW_SCROLLTOP_);
$('body').append($('<div></div>').addClass('iosfix'));
setTimeout(function() {
  $('.iosfix').remove();
}, 500);

它也适用于 jQuery.scrollTo。

请参阅此处的示例。

Answer 3

我在单独的固定元素上有多个链接（模态弹出窗口 + 固定黑屏 div + 正常固定工具栏），但这些答案都不起作用，所以我对尝试同一主题的变体进行了修补。就像所有这些表明的那样，关键是重新渲染元素。

最初我尝试将 1px 添加到固定元素的宽度并将其删除。这确实导致了重新渲染，但是重新渲染的元素与非重新渲染的元素没有对齐——我怀疑这是这个 iOS bug 的另一个结果。答案是简单地添加主体的宽度并再次减去（或设置为自动），即：

//jQuery will calculate the current width and then +1 to this and set it
$('body').css('width', '+=1');

//Remove width css
setTimeout(function() {
  $('body').css('width', '');
}, 1);

如果不使用jquery，您将需要获取主体的当前宽度+1px，然后设置宽度。

Answer 4

如果像我一样，以前的解决方案都不适合您，那么这是我的解决方案。

技巧是：

• 进行滚动（Animate或scrollTo等）
• 在滚动之后，位置：绝对固定元素
• 在“touchmove”事件上，恢复位置：固定

这里是一个例子：

  $('body').animate({
       scrollTop: newPos}, 1000, 'jswing', function () {
          $('header').css({position:'absolute', top:newPos});
  });

  $(document).bind('touchmove',function(){
       $('header').css({position:'fixed', top:'0px'});
  });   

我对粘性页脚使用了相同的技巧和其他浮动固定元件。

Answer 5

这个方法的一个变体也对我有用。尽量不在移动设备上使用框架。

    var d = document.createElement("div");
    d.style.height = "101%";
    d.style.overflow = "hidden";
    document.body.appendChild(d);
    window.scrollTo(0, scrollToM);
    setTimeout(function() {
        d.parentNode.removeChild(d);
    }, 10);

Answer 6

花了几个小时后，我找到了一个解决方法：尝试滚动（可能有动画），然后再次滚动到同一点（没有动画）。
通过这种方式，您可以强制浏览器从视图中删除错误的渲染。

例子：

$('body, html')
    .animate({scrollTop: 0})
    .scrollTop(0);

Answer 7

我在 iOS5 和 JQueryMobile 上遇到了同样的问题。固定标题和页脚。可扩展的内容，突然我有一个幽灵页脚，你可以看到但不能触摸。
我在直接将位置更改为绝对位置然后返回工作时遇到了一些问题。它似乎只在某些时候有效。
我最终用了这个。

        $(myFixedFooter).css("position", "relative").hide(0, function () {
            $(this).show(0).css("position", "");
        });

当页脚执行其操作时，这无疑会产生一个“昙花一现”。然而我发现大约 98% 的时间页脚停留在页面底部。我发现和尝试的所有其他解决方法和调整并不总是将页脚留在底部，或者它们一开始就没有解决问题。

希望苹果能尽快修复。

Answer 8

我在我正在编写的 iPhone 应用程序中发现了您所描述的确切行为。我加载了一堆 HTML 文本，右侧有一个索引。从菜单中选择一个项目并滚动文本后，菜单将变得无响应（因为着陆区域已从其下方滚动出来）。我还发现，即使是很小的文本滚动也会重新启用索引菜单。

我创建了一个测试用例并在此处上传了文件（如果您在非 iPhone 浏览器上查看此文件，请垂直缩小窗口以查看正确的行为）：

http://www.misterpeachy.com/index_test.html

我发现索引菜单随着文本滚动（即使可见菜单没有移动）我点击了 B 然后再次点击B。它没有滚动到 B（基本上不动），而是滚动到 D。

现在我被卡住了。我希望我可以添加一些 JavaScript 代码（我从来没有用 JavaScript 编程过，所以这是一个小问题），在我将手指从菜单项上移开后（并且在文本滚动之后），这些代码将滚动文本一个像素当然是到选定的地方）。也许 JavaScript 可以检测到滚动，然后向其添加另一个滚动。

Answer 9

如果它可以帮助某人：

我遇到了完全相同的问题，我的代码看起来像这样（它是一个单页网络应用程序）：

window.scrollTo(0,0);
$('section.current').removeClass('current');
$(target).addClass('current');

我花了几个小时尝试一切（101％高度div，改变位置类型......），但最终 Device-Bugs 上描述的最后一个建议保存了 天。就我而言，这只是在 div 未渲染时滚动的问题：

$('section.current').removeClass('current');
window.scrollTo(0,0);
$(target).addClass('current');

Answer 10

解决方案的另一种变体是将文档宽度的大小增加 1px，然后立即撤消它。这样做的优点是不会创建更多元素，并且我没有经历过任何闪烁。

https://stackoverflow.com/a/11479118/43217

Answer 11

示例代码

if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
    $(document).on('focus', 'input, textarea', function() {
        $('header').css({'position':'static'});
    });
    $(document).on('blur', 'input, textarea', function() {
        $('header').css({'position':'fixed'});
    });
}