javascript - 防止点击时触发滚动功能

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;
}