当用户单击滚动页面的锚链接时，是否可以禁用 .scroll 功能

Question

我正在处理一个时间轴页面，并希望创建一个类似于此页面右侧的年份列表的功能：https://www.mikebloomberg.com/about/

我有一个点击事件设置，用于在用户选择日期时在日期周围添加圆圈边框，并在选择另一个日期时将其删除。使用此视口插件，我还设置了页面，以便圆圈边框出现在当前屏幕上的年份/日期周围。

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

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

滚动函数的脚本：

        $(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');
    });

这是我最终将点击的 = false 行固定到的功能，作为从顶部 url 中获取锚点 #links 的解决方法而实施的：

$(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
    }
});

Answer 2

您可以使用

jquery .off()函数来删除滚动事件侦听器。

假设.button是用于删除滚动的按钮

 $('#button').on('click', function(){
        $(window).off('scroll');
 });

之后，您可以在所需位置重新初始化滚动处理程序（更好地在函数中包装初始化）。

您可以使用以下功能获取当前滚动位置：

$(window).on("scroll", function(){
    console.log($(document).scrollTop())
})

您可以使用 .offset() 获取页面中元素的位置，但您只需要返回对象中的top属性。

$("#button").offset().top

因此，在此之后，您只需要在附加到窗口上事件的函数中比较这两个值scroll。

现在更清楚了吗？