jQuery on scroll listener after click event

Question

What is the proper way to activate an on scroll listener after a click event?

I'm currently using:

$('.button').click(function (event) {
   $(window).on("scroll", someFunction);
}

someFunction = function() {
   //do stuff 
   $(window).off("scroll"); //disable scroll listener
}

On a click event I enable the scroll listener which runs someFunction. The function does stuff and disables the scroll listener when finished. The scroll listener is enabled again on click.

My concern is that I'm not doing it right. Please advise!

Note: The scroll listener cannot run indefinitely. It starts on click and must finish at the end of myFunction.

Note: I'm not trying to detect when user stops scrolling..

possible duplicate of jQuery scroll() detect when user stops scrolling — Jako
– Jako, Commented May 6, 2015 at 17:30
@Jako not dublicate. I'm trying to find out how " to activate an on scroll listener after a click event" as posted. Not detect when user stops scrolling. Totally different! — CyberJunkie
– CyberJunkie, Commented May 6, 2015 at 17:32

sergdenisov · Accepted Answer · 2015-11-24 16:43:35Z

6

You could use jQuery .one():

$('.button').on('click', function() {
    $(window).one('scroll', someFunction);
});

edited Nov 24, 2015 at 16:43

answered May 6, 2015 at 17:39

sergdenisov

8,6129 gold badges52 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexander Bondar · Accepted Answer · 2015-05-06 17:33:14Z

3

Every single click adds an additional scroll event listener. I would encapsulate the binding with an additional variable:

var isScrollBindingActive = false;
$('.button').click(function (event) {
    if (!isScrollBindingActive) {
        isScrollBindingActive = true;
        $(window).on("scroll", someFunction);
    }
}

someFunction = function() {
   //do stuff 
   $(window).off("scroll"); //disable scroll listener
   isScrollBindingActive = false; // allow binding again if wished
}

answered May 6, 2015 at 17:33

Alexander Bondar

5444 silver badges21 bronze badges

1 Comment

CyberJunkie Over a year ago

Thanks! This is why I was having trouble! I would vote as correct answer but Sergey's solution $(window).one('scroll', someFunction); seems to work as well with less code.

Tyr · Accepted Answer · 2015-05-06 17:25:30Z

-1

You can do it the following way:

$('.button').click(function (event) {
   $(window).bind("scroll", someFunction);
}

someFunction = function() {
   //do stuff 
   $(window).unbind("scroll"); // remove scroll listener
}

answered May 6, 2015 at 17:25

Tyr

2,7561 gold badge15 silver badges21 bronze badges

6 Comments

CyberJunkie Over a year ago

is there a difference using bind instead of on?

scniro Over a year ago

yea, bind is deprecated

Tyr Over a year ago

I don't find any deprecated flags in the api for bind/unbind.

Alexander Bondar Over a year ago

I think, @sal-niro means live.

scniro Over a year ago

@Tyr okay you are perhaps correct about official deprecated-ness, but the docs do state "As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document". Anyways, bind() really shouldn't be used in place of on(). Unless you can think of a good reason?

|

Collectives™ on Stack Overflow

jQuery on scroll listener after click event

3 Answers 3

Comments

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related