Jquery scrollTop编程更改后，移动Safari在固定位置按钮上出现错误。。。？

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

在打开到页面其余部分的文本框中单击“提交”后，按钮才会淡入。。。在页面的其余部分被加载并且按钮淡入后，您可以单击其中一个按钮，它们都可以工作

但是，单击它们会导致编程滚动，在滚动完成后，您不能再单击其中任何一个按钮，除非您用手指实际滚动页面，哪怕只是一个小小的单像素滚动

我注意到的是，在程序滚动之后，如果你点击顶部按钮的稍下方，你会看到高亮显示，就像你点击底部按钮一样，底部按钮的动作会被处理，这告诉我错误在于，当以编程方式滚动时，固定位置按钮仍然会随着页面的其余部分移动，并且在执行实际的触摸滚动之前不会返回到其固定位置

有人知道怎么解决这个问题吗

我添加了一个弹出窗口，显示按下了哪个按钮，以便您可以测试它，还记得在第一次按下向下按钮（有效）尝试再次按下后，它将不起作用，但单击向上按钮下方，您将看到向下按钮动作发生

谢谢你的帮助

托马斯

（如果你能告诉我在哪里可以向苹果提交一个bug，那也不错，除非已经有了）

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

编辑2：这里有一个简单的例子来说明同样的问题

编辑3：错误报告给苹果公司

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

例如：

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

---

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

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

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

---

现在我被卡住了。我希望我可以添加一些JavaScript代码（我从来没有用JavaScript编程过，所以这是一个小问题），在我将手指从菜单项上提起后（当然，在文本滚动到所选位置后），将文本滚动一个像素。也许JavaScript可以检测到滚动，然后再添加另一个滚动。

我们在两个不同的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" });
});

---

我在iOS5和JQueryMobile上也遇到了同样的问题。固定页眉和页脚。可扩展的内容，突然我有一个鬼脚，你可以看到，但不能触摸。 我在把位置直接换成绝对位置然后再回去工作时遇到了点问题。它似乎只在某些时候起作用。 最后我用了这个

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

当页脚做它的事情时，这挑衅地创造了一个“光点”。然而，我发现大约98%的时间页脚都在页面底部。我发现并尝试过的所有其他解决方法和调整方法都不总是将页脚放在底部，或者它们没有首先解决问题

---

希望苹果能很快修复。

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

尝试：

iosfix先生{
身高：101%；
溢出：隐藏；
}

当您滚动时：

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

window.scrollTo（0，\u NEW\u SCROLLTOP）；
$（'body'）.append（$（''）.addClass（'iosfix'）；
setTimeout（函数（）{
$（'.iosfix'）.remove（）；
}, 500);

它还可以与jQuery.scrollTo一起使用

---

请看一个例子。

这种方法的一种变体也适用于我。尽量不使用我可以在手机上使用的框架

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

---

如果它可以帮助某人：

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

我花了好几个小时尝试了所有的事情（101%的高度，改变姿势类型…），但最后一个在上描述的建议挽救了这一天。在我的例子中，当没有呈现div时，只是滚动的问题：

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

---

我在单独的固定元素上有多个链接（一个模式弹出窗口+固定黑屏div+普通固定工具栏），但这些答案都不起作用，所以我尝试了同一主题的变体。像所有这些建议一样，关键是重新渲染元素

最初，我尝试将1px添加到固定元素的宽度，然后将其删除。这确实导致了重新渲染，但重新渲染的元素与未重新渲染的元素不一致——我怀疑这是iOS错误的另一个结果。答案是简单地增加身体的宽度，然后再减去（或设置为自动），即：

如果不使用jquery，则需要获取body的当前宽度+1px，然后设置

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

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

//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);

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

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

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