Question

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

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

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

我想要做的是在用户点击时停止滚动功能，但在页面滚动到正确位置后再次启动滚动功能。任何想法或建议将不胜感激！

滚动功能的脚本：

        $(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行添加到上面的函数，用于将锚点中的#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
    }
});

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事件的函数中比较这两个值。

现在更清楚了吗？

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

2 个答案: