Jquery detect scroll once

Question

Have read that it is possible to detect a scroll with this line:

$('window').one('scroll', function() {  } );

If have this inline code:

var TimeVariable=setInterval(function(){ DoJQueryStuff() },300);

function DoJQueryStuff()
 {
 if(typeof jQuery == "undefined") return;
 window.clearInterval(TimeVariable);
 $('body').one('mousemove', function() { alert('mouse'); } );
 $('window').one('scroll', function() { alert('scroll'); } );
 }

DoJQueryStuff is called every 300 ms until JQuery is loaded. If I move the mouse anywhere on the screen, I got the "mouse" alert. If I scroll down I do NOT get the "scroll" alert. i.e. it's not firing.

Any help would be greatly appreciated.

David

Rather than checking every 300ms until jQuery loads, would it be possible to add the function into the ready function? $(document).ready(function() { do stuff }); — Kyle
– Kyle, Commented Dec 3, 2013 at 22:12
Kyle, $(document) without Jquery loaded would cause an error. jquery is loading after the pages loaded (this is now what google suggests we do). An example of your idea would be appreciated — Cymro
– Cymro, Commented Dec 4, 2013 at 21:51

ins0 · Accepted Answer · 2013-12-05 08:18:06Z

7

first please use jquery ready http://api.jquery.com/ready/ method. i dont want to say your implementation is wrong but is slower than the jquery ready method.

your scroll function don't get executed basically because you are binding it to the wrong object. when you refer to the window object with jquery don't wrap it in apostrophs.

if you do so, jquery will intern call the document.getElementsByTagName and can't find the tagname window because window is not an child of the window.document node. so your scroll detect function never gets fired because jquery can't bind a eventListener to your submited element tagname.

simply bind it to window without apostrophs. this forces jquery to bind the scroll event directly to the window DOM object where your function is correctly fired on scroll.

Example:

$(window).ready(function(){
    $(this).one('mousemove', function() { 
        // mouse move
    }).one('scroll', function(){
        // scroll 
    });
});

edited Dec 5, 2013 at 8:18

answered Dec 3, 2013 at 22:12

ins0

3,9281 gold badge22 silver badges28 bronze badges

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

3 Comments

Cymro Over a year ago

Google tells us to load jquery after the page has loaded. That's what I'm doing. Then I'm setting a timer to check that jquery has indeed been loaded. I am detecting the mouse move or scroll to load an external js file. Why does my scroll detect have to be in the ready function?

ins0 Over a year ago

i updated my explanation - hope it becomes now more comprehensible

mcrumley Over a year ago

You can use an onload function when you load jQuery to run any code that depends on it. If you are using a library, it should have a way to add an onload function. If you are not, you can use <script onload="...">

Collectives™ on Stack Overflow

Jquery detect scroll once

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related