iOS Safari Overscrolling：下拉与弹跳

Posted 2023-03-14

【中文标题】iOS Safari Overscrolling：下拉与弹跳

【英文标题】：iOS Safari Overscrolling: Pulling down vs. bouncing

【发布时间】：2016-03-23 13:35:41

【问题描述】：

我和我的团队正在开发一个带有固定标题且不会滚动的 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()？

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

【参考方案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);

【讨论】：

感谢您的回答！由于这个绘制循环是永久运行的，即使页面没有滚动，你不认为它可能会导致性能问题吗？

感谢您的回答！它比使用纯 CSS 更好地工作。当快速滚动时，似乎只设置 CSS 类来触发视觉变化的工作不够快。我仍然希望能在性能方面提供一些提示......

@Windwalker 可能需要更多代码，例如检测用户何时滚动。

【参考方案2】：

这已在 iOS 9.3 中解决 新的元标记选项

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

【讨论】：

见：developer.apple.com/library/mac/releasenotes/General/…

感谢您的回答，但（过度）滚动/弹跳的参考在哪里？