CODEWITHSUNDEEP
javascript
sprabhakaran
sprabhakaran

Reputation: 1635

Onscroll function is not working for Chrome

The below code is working fine for Firefox browser. But, not chrome. What is the issue in below code ? 

window.onload = function()
{
   document.body.onscroll =  Test.callFn;
}

var Test = new function()
{
   this.callFn = function()
   {
      console.log("Calling this function");
   }
}

Thanks

Upvotes: 15

Views: 33469

Answers (8)

Ebenezer Jiang
Ebenezer Jiang

Reputation: 11

Try using the window.onwheel function instead.

When you are using window.onscroll you have to first be able to scroll in the window. Hence, window.onscroll

The window.onwheel function is activated when whatever the mouse wheel is turning on the object. In the example, the object is window, so when you "scroll" in the window, it will run the function.

Also, you would want to remove window.onload, since that function only runs when the window is loaded.

A sample code for scrolling using the window.onwheel function would be this: 

window.onwheel = ()=>{
    alert("Scrolling")
}
<p>Scroll here!</p>

You can also find the direction of scrolling (up, down) by doing the following:

window.onwheel = (e)=>{
    //deltaX shows the amount scrolled right-left
    //deltaY shows the amount scrolled up-down
    console.log(e.deltaX(), e.deltaY())
}

Hope this helps.

Upvotes: 0

Sam M
Sam M

Reputation: 51

window.onscroll does not work at times when you style an element using theheight property of css.

try using min-height or max-height instead.

Upvotes: 5

t3rmian
t3rmian

Reputation: 661

This might also happen when the height of html and body tags is set to 100% and the scroll event does not fire for window nor document. To check which element is scrolled I slightly modified Aaron Mason's snippet which wasn't working for me either:

document.querySelectorAll('*').forEach(function(elem) {
    elem.addEventListener('scroll', function() {
        console.log(this);
    });
});

Upvotes: 4

markwilliamsweb
markwilliamsweb

Reputation: 490

I had the same issue and it was because I had overflow-x: hidden assigned to the body. Removing this fixed the problem.

Upvotes: 7

Siraj Alam
Siraj Alam

Reputation: 10025

One of the possibility is there are two window.onscroll statements on your page that each statement calling different JS method. Check the included files and all the methods that are in the page loading.

Upvotes: 4

alcohol is evil
alcohol is evil

Reputation: 704

I had similar problem today. You can change document.body to window:

window.onload = function()
{
   window.onscroll = function()
   {
      console.log("Calling this function");
   }
}

I noticed that in chrome onscroll event is working when body element has onscroll attribute, but in IE it's working when html element has onscroll attribute, so it's the best to assign onscroll event listener to window object.

PS. if you want to check how many pixels you scrolled - use window.pageYOffset instead of document.body.scrollTop (the same situation with chrome and IE as described above).

Upvotes: 10

jcsanyi
jcsanyi

Reputation: 8174

You don't want the () when you're assigning callFn as the onscroll handler.
You don't want to execute the function, you want to assign a reference to it.

In addition, onscroll for an entire document seems to work better cross-browser on the window object, rather than document or document.body.

window.onscroll = Test.callFn;

Upvotes: 6

J. Bruni
J. Bruni

Reputation: 20492

In Chrome, it works if you attach the event handler to the document.onscroll event:

document.onscroll = function() { console.log('Works in Chrome!'); };

Upvotes: 1

Related Questions