防止滚动功能在单击时触发

Question

我有一个自动标头，它藏在向下滚动并再次出现在滚动时。我也有两个导航箭头，可让您在各节之间上下上下。不过，问题是在单击上箭头时，菜单显示，因为网站会滚动。因此，我想找出但实际上可以弄清楚的是如何防止在单击上箭头时调用自动功能。

这就是触发隐藏功能的原因，如果我们在单击上箭头时滚动，我不想触发它：

//set scrolling variables
var scrolling = false,
    previousTop = 0,
    currentTop = 0,
    scrollDelta = 10,
    scrollOffset = 150;
$(window).on('scroll', function(){
    if( !scrolling ) {
        scrolling = true;
        (!window.requestAnimationFrame)
            ? setTimeout(autoHideHeader, 250)
            : requestAnimationFrame(autoHideHeader);
    }
});

这是箭头代码：

var sections = $('.panel-section');
console.log(sections);
var i =0;
var scrolto = 0;
function next(){
    if(i == 0){
        $('.prev-section').show();
    }
    if(i < sections.length -1){
        i++;
        if(i == sections.length -1){
            $('.next-section').hide();
        }
        $('html, body').animate({
            scrollTop: sections[i].offsetTop
        }, 2000);
    }else{
        alert('end reached');
    }
}
function prev(){
    if(i == sections.length -1){
        $('.next-section').show();
    }
    if(i > 0){
        i--;
        if(i == 0){
            $('.prev-section').hide();
        }
        $('html, body').animate({
            scrollTop: sections[i].offsetTop
        }, 2000);
    }
}
$('html').keydown(function(e){
    if(e.which == '38'){
        prev();
    }
    if(e.which == '40'){
        next();
    }
});
$('.next-section').click(function(e){
    e.preventDefault();
    next();
});
$('.prev-section').click(function(e){
    e.preventDefault();
    prev();
});

我认为这是唯一的相关代码，但是我可能是错误的，如果是，我可以提供更多。

Answer 1

由于按钮单击而滚动时设置变量，如果该变量为true

，则不要显示标题

var prevSectionClick = false;
$(window).on('scroll', function(){
    if( !scrolling && !prevSectionClick) {
        scrolling = true;
        (!window.requestAnimationFrame)
            ? setTimeout(autoHideHeader, 250)
            : requestAnimationFrame(autoHideHeader);
    }
});
$('.prev-section').click(function(e){
    e.preventDefault();
    prevSectionClick=true;
    prev();
    prevSectionClick=false;
});

只要您的prev（）函数保持同步，这将起作用。否则，您必须处理您在功能中介绍的2秒动画

..............

来自评论：

$('.prev-section').click(function(e){
    e.preventDefault();
    prevSectionClick=true;
    prev();
});
function prev(){
    if(i == sections.length -1){
        $('.next-section').show();
    }
    if(i > 0){
        i--;
        if(i == 0){
            $('.prev-section').hide();
        }
        $('html, body').animate({
            scrollTop: sections[i].offsetTop
        }, 2000, function() {
            prevSectionClick=false;
        });
    }
    else prevSectionClick=false;
}