CODEWITHSUNDEEP
javascripteventsscroll
WeaselFox
WeaselFox

Reputation: 7400

how to log scroll events to console with javascript

I want to output to the console the x and y changes of any scroll event on the window - just to test something.
How do you do this with plain JS?

Upvotes: 2

Views: 9584

Answers (3)

Jacob
Jacob

Reputation: 615

I usually use something like this:

window.addEventListener('scroll', console.log);

Upvotes: 0

GitaarLAB
GitaarLAB

Reputation: 14655

window.onscroll=function(){
   console.log( 
     'top: '  + (window.pageYOffset || document.documentElement.scrollTop) + ' ' +
     'left: ' + (window.pageXOffset || document.documentElement.scrollLeft)
   );
}
asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>

Edit:

Instead of setting the function directly, you can also use: window.addEventListener('click', func, false).

Note that for backward compatibility (notably < IE9) you'd need attachEvent, here is a basic workaround:

function addEventHandler(elem, eventType, handler) {
 if (elem.addEventListener)
     elem.addEventListener (eventType,handler,false);
 else if (elem.attachEvent)
     elem.attachEvent ('on'+eventType,handler); 
}

Upvotes: 4

AlvaroAV
AlvaroAV

Reputation: 10563

To get the scroll you can do:

var scrollX = window.pageXOffset || document.documentElement.scrollLeft; 
var scrollY = window.pageYOffset || document.documentElement.scrollTop;

and to capture the scrolling event on pure Javascript:

function myScript(){
    var scrollX = window.pageXOffset || document.documentElement.scrollLeft;
    var scrollY = window.pageYOffset || document.documentElement.scrollTop;

    console.log('Scroll X:'+scrollX+' Scroll Y:'+scrollY)
}

window.addEventListener("scroll", myScript);

You can call myScript() manually and it will return valid values too

Upvotes: 2

Related Questions