Question

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

是否有人提示如何在两种情况下使我的滚动处理工作？

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新元标记选项

中得到解决

s3://mybucket/2016/

iOS Safari Overscrolling：拉低与弹跳

2 个答案: