javascript - 当用户单击滚动页面的 anchor 链接时，是否可以禁用 .scroll 函数？

Question

我正在制作一个时间轴页面，我想创建一个类似于此页面右侧的年份列表的功能:https://www.mikebloomberg.com/about/

我有一个点击事件设置，当用户选择它时在日期周围添加一个圆圈边框，并在选择另一个日期时将其删除。使用这个 viewport plugin ，我也有我的页面设置，以便圆形边框出现在当前屏幕上的年份/日期周围。

我遇到的问题是，当用户单击年份并且页面滚动到正确的 anchor 时，圆形边框在列表中每年出现和消失，直到它落在正确的年份。所以基本上点击也触发了滚动功能。

我想做的是在用户单击时停止滚动功能，但在页面完成滚动到正确位置后重新开始。任何想法或建议将不胜感激!

滚动功能的脚本:

        $(window).scroll(function (){
            if($("#intro:in-viewport").length > 0){
                $('.tNavIntro').css({border: '2px solid #50b855'});
                $('.tNav2012').css({border: ''});
            }

            else if($("#time2012:in-viewport").length > 0){
                $('.tNav2012').css({border: '2px solid #50b855'});
                $('.tNavIntro').css({border: ''});
                $('.tNav2013').css({border: ''});
            }

            else if($("#time2013:in-viewport").length > 0){
                $('.tNav2013').css({border: '2px solid #50b855'});
                $('.tNavIntro').css({border: ''});
                $('.tNav2012').css({border: ''});
                $('.tNav2015').css({border: ''});
            }

            else if($("#time2015:in-viewport").length > 0){
                $('.tNav2015').css({border: '2px solid #50b855'});
                $('.tNavIntro').css({border: ''});
                $('.tNav2013').css({border: ''});
                $('.tNav2016').css({border: ''});
            }

            else if($("#time2016:in-viewport").length > 0){
                $('.tNav2016').css({border: '2px solid #50b855'});
                $('.tNavIntro').css({border: ''});
                $('.tNav2015').css({border: ''});
            }
        });

对于点击功能:

  $('.timeLineNavWrap div').on('click', function(){
        $('div.selected').removeClass('selected');
        $(this).addClass('selected');
    });

这是我最终将 clicked = false 行添加到的函数，作为解决方法将来自 anchor 的#links 从顶部的 url 中获取到位:

$(document).ready(function(){
    $('.link').on('click',function (e) {
        $('html, body').stop().animate({
            'scrollTop': $($(this).attr('rel')).offset().top
        }, 900, 'swing', function () {
            clicked = false;
        });
    });
});

Answer 1

在您的点击功能中，您可以设置某种全局状态变量来跟踪用户是否刚刚点击。如果是，您可以禁用滚动功能。 (只需将其包装在 if (!clicked) 中。)完成后，将变量设置为 false 并手动调用滚动函数。

在代码中:

var clicked = false;
$('.timeLineNavWrap div').on('click', function(){
    clicked = true;
    $('div.selected').removeClass('selected');
    $(this).addClass('selected');
    // Is there some other code here that scrolls?
    clicked = false;
    $(window).scroll();

});

$(window).scroll(function (){
    if (!clicked) {
        if($("#intro:in-viewport").length > 0){
            $('.tNavIntro').css({border: '2px solid #50b855'});
            $('.tNav2012').css({border: ''});
        }
        # etc
    }
});