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

iOS Safari Overscrolling: Pulling down vs. bouncing

本文关键字：Safari 滚动 iOS      更新时间：2023-09-26

我和我的团队正在开发一个web应用程序，该应用程序带有固定的头，不会滚动。

为了在iOS上处理过度滚动，我们需要检测负方向的滚动，并将固定标题重新定位为静态，使其与页面的其余部分一起滚动
我们通过将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()

有人告诉我如何在这两种情况下都能进行滚动处理吗？

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

此问题已在iOS 9.3中解决新的元标记选项

<meta name="viewport"content="width=device-width,shrink-to-fit=no">
相关文章：