Is it possible to disable a .scroll function when a user clicks an anchor link that scrolls the page?

问题

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/

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!

Script for the scroll function:

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

For the click function:

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

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

回答1:

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.

In code:

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

回答2:

You can use jquery .off() function for removing your scroll event listener.

Assuming .button is your button for removing scroll

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

After that you can reinit your scroll handler at desired location (better wrap initialization in function).

You can get current scroll location with following function:

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

You can get position of element in the page with .offset(), but you need only top property in returned object.

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

So after that you need only to compare this two values in a function attached to scroll event on window.

Is it more clear now?

来源：https://stackoverflow.com/questions/35734067/is-it-possible-to-disable-a-scroll-function-when-a-user-clicks-an-anchor-link-t

标签

javascript

jquery

html

css