iOS Safari 过度滚动：下拉与弹跳

Question

我和我的团队正在开发一个带有固定 header 且不会滚动的 Web 应用程序。

为了处理 iOS 上的过度滚动，我们需要检测负方向的滚动并将固定的 header 重新定位为静态，使其与页面的其余部分一起滚动。
我们通过将 jQuery 滚动处理程序绑定到 window:

来做到这一点

$(window).scroll(function() {
    if ($(window).scrollTop() < 0) {
        // position static header postioning in order
        // let the header behave correctly when overscrolling
    }
});

当页面被手动拉（拖）下来时，这很有效。但是每个 iOS 用户都知道，当从向下位置再次加速滚动页面时，一旦到达顶部，它就会弹跳（过度滚动）。

在这种情况下，我们的滚动处理不起作用。

目前我可以想象两个原因，为什么会出现这种不同的行为：

快速向上滚动并使页面弹跳对于 Safari 的 JS 引擎来说太快了，无法确保流畅的处理
从技术上讲，向上滚动时弹跳与手动下拉网页一样吗？关于 $(window).scrollTop() ?

有没有人提示如何使我的滚动处理在这两种情况下都能正常工作？

Answer 1

如果 CSS 中的 position:fixed 不适合你，那么你应该尝试制作一个绘制循环，并且每次循环运行时，你放置一个相等的水平偏移您的用户滚动了多远。

基本上，如果 CSS 不起作用，您的 JS 应该如下所示：

var head = document.getElementById("header");
//head now has our header
head.style.position = "relative";
//and now, we can manipulate it's position
function draw(){
    head.style.top = window.pageYOffset;
    //all that's left to do is do this each and every frame.
}

如果您不知道如何制作绘制循环，请查看代码：

var frameRate = 60;
var frameCounter = (function(){
    var counter = 0;
    return function(){
        counter ++;
        if(counter > frameRate/1000){
            counter -= frameRate/1000;
            draw();
        }
    }
})();
setInterval(frameCounter, 1);

Answer 2

这已在 iOS 9.3 新元标记选项

中解决

<meta name="viewport"content="width=device-width,shrink-to-fit=no">

iOS Safari 过度滚动：下拉与弹跳

iOS Safari Overscrolling: Pulling down vs. bouncing

html

javascript

jquery

mobile-safari

ios