Safari中Overscroll导致回弹时滚动方向判断错误问题求助

你的问题核心是Safari的弹性滚动（overscroll）会让scrollTop出现负值，而且回弹过程中触发的滚动事件会错误判断滚动方向，导致页面顶部时Header被错误隐藏。不用完全重写代码，只需要针对Safari的特性做两处关键修改：

修改方案 #

1. 过滤异常的scrollTop值：把获取到的scrollTop值限制为不小于0，避免弹性滚动时的负数干扰判断。
2. 增加顶部边界强制判断：当页面处于顶部（scrollTop === 0）时，强制移除隐藏类，确保Header始终显示。

修改后的代码如下：

var lastScrollTop = 0;
$(window).scroll(function(event){
    // 过滤Safari弹性滚动导致的负值，确保scrollTop不小于0
    var st = Math.max(0, $(this).scrollTop());
    
    // 页面在顶部时，强制显示header
    if (st === 0) {
        $('.header').removeClass("header-invisible");
        lastScrollTop = st;
        return;
    }
    
    // 原有滚动方向判断逻辑
    if (st > lastScrollTop){
        $('.header').addClass("header-invisible");
    } else {
        $('.header').removeClass("header-invisible");
    }
    lastScrollTop = st;
});

额外优化（可选） #

如果滚动事件触发太频繁导致性能问题，可以加上防抖处理：

var lastScrollTop = 0;
var scrollTimeout;

$(window).scroll(function(event){
    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(function() {
        var st = Math.max(0, $(this).scrollTop());
        
        if (st === 0) {
            $('.header').removeClass("header-invisible");
            lastScrollTop = st;
            return;
        }
        
        if (st > lastScrollTop){
            $('.header').addClass("header-invisible");
        } else {
            $('.header').removeClass("header-invisible");
        }
        lastScrollTop = st;
    }, 10); // 10ms延迟，可根据需求调整
});

关于你提到的CSS禁用overscroll，Mac端Safari的弹性滚动属于系统级行为，目前没有通用的CSS方式完全禁用，所以通过JS修正判断逻辑是更可靠的方案。

内容的提问来源于stack exchange，提问作者KingMidas