jquery - 解决 safari 'bounce' 问题

Question

我有一些代码，当用户向下滚动时，我的导航向上(屏幕外)设置动画，当用户向上滚动时，它向下设置动画。

但是，在 Safari 中，当用户以更快的速度向上滚动时，页面会在顶部“弹跳”一点，这使得我的导航在用户位于顶部时动画起来。有办法解决吗？

我的代码

jQuery(document).ready(function($){
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('nav').outerHeight(true);

$(window).scroll(function(event) { didScroll = true; });

setInterval(function() {
if (didScroll) {
  hasScrolled();
  didScroll = false;
}
}, 100);

function hasScrolled() {
if($( window ).width() > 768) {
   var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
   return;
if (st > lastScrollTop) {
    // Scroll Down
        $('#screen-nav').removeClass('nav-down').addClass('nav-up');
   } else { 
        $('#screen-nav').removeClass('nav-up').addClass('nav-down');
   }  

 }
 lastScrollTop = st;
 }

});

Answer 1

我真的很惊讶 Safari 向脚本传达负面的过度滚动，因为它是一种非标准技术。然而，我认为你只需要调整你的滚动条件来解决它:

if (st > lastScrollTop && lastScrollTop >= 0 && st > 0) {

这两个额外的检查将确保如果当前滚动位置或之前的滚动位置为负，则菜单不会被上推。

因为我没有 Safari 来测试，我通过获取一个页面并将其主体向下推 100 像素来模拟它，然后通过检查数字 100 而不是 0 来执行测试:

jQuery("body")[0].id = "screen-nav";
jQuery("body").css("margin-top", "100px");

jQuery(document).ready(function($){
    var didScroll;
    var lastScrollTop = 0;
    var delta = 5;
    var navbarHeight = $('nav').outerHeight(true);

    $(window).scroll(function(event) {
        didScroll = true;
    });

    setInterval(function() {
        if (didScroll) {
        hasScrolled();
        didScroll = false;
        }
    }, 100);

    function hasScrolled() {
        if ($(window).width() > 768) {
            var st = $(this).scrollTop();
            if (Math.abs(lastScrollTop - st) <= delta) {
                return;
            }
            if (st > lastScrollTop && lastScrollTop >= 100 && st > 100) {
                $('#screen-nav').removeClass('nav-down').addClass('nav-up');
            } else {
                $('#screen-nav').removeClass('nav-up').addClass('nav-down');
            }
        }
        lastScrollTop = st;
    }
});

我对您同时使用 onscroll 事件 和 100 毫秒计时器感到有点困惑。您可以使用一个或另一个来实现您的解决方案，但没有必要结合使用两者。我可能会使用 onscroll，因为当用户不滚动时开销较小。只是需要考虑的事情。