当用户单击滚动页面的锚链接时，是否可以禁用.scroll功能? [英] Is it possible to disable a .scroll function when a user clicks an anchor link that scrolls the page?

问题描述

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

I am working on a timeline page and would like to create a feature similar to the list of years on the righthand side of this page: https://www.mikebloomberg.com/about/

我有一个单击事件设置，可以在用户选择日期时在日期周围添加一个圆形边框，并在选择另一个日期时将其删除.使用此 viewport插件，我还可以设置页面，以便圆圈边框出现在年份/当前在屏幕上显示的日期.

I have a click event setup to add a circle border around the date when the user selects it, and to remove it when another date is chosen. Using this viewport plugin, I also have my page setup so that the circle border appears around the year/date that is currently on screen.

我遇到的问题是，当用户单击年份并且页面滚动到正确的定位点时，列表中的每年都会出现并消失圆圈边界，直到它落在正确的年份上为止.因此，基本上，单击也会触发滚动功能.

The problem I am running into is that when a user clicks a year and the page scrolls to the correct anchor point the circle border appears and disappears along each year in the list until it lands on the correct year. So basically the click is also setting off the scroll function.

我想做的是，当用户单击时停止滚动功能的发生，但是一旦页面滚动到正确的位置后再次启动.任何想法或建议，将不胜感激！

What I would like to do is stop the scroll function from occurring when a user clicks but to start again once the page has finished scrolling to the correct position. Any ideas or suggestions would be appreciated!

滚动功能脚本:

        $(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:

This is the function I ended up tacking the clicked = false line onto, put in place as a work around for getting the #links from anchors out of the url at the top:

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

推荐答案

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

In your click function, you could set some sort of global state variable that keeps track of whether the user just clicked or not. If yes, you can disable the scroll function. (Just wrap it in if (!clicked).) When you're done, set the variable to false and manually call the scroll function.

在代码中:

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

这篇关于当用户单击滚动页面的锚链接时，是否可以禁用.scroll功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！