jQuery window scroll event does not fire up

Question

I'm trying to implement a simple "stay inside the viewport" behaviour to a div via jquery. For that i need to bind a function to the scroll event of the window, but i can't seem to get it to fire up: nothing happens. I've tried a simple alert(), console.log() no dice. An idea what i'm doing wrong?

This code :

$(window).scroll(function () {  
            console.log("scrolling");           
});

sits in script.js, located at the very bottom of my html file

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

UPDATE Test URL: http://pixeline.eu/test/menu.php

Is the content of the page long enough? Works perfectly: http://jsfiddle.net/fkling/x5NzM/ If there is no content that can be scrolled, the `scroll` event won't be raised. — Felix Kling, Apr 16 '11 at 12:59
your example page is binding to `$(document).scroll` try `$(window).scroll` — MikeM, Apr 16 '11 at 13:42
it seems that the the scroll not triggering has something to do with the way your using the css, am doing some tests now. — Charlie Sheather, Apr 16 '11 at 13:45
Also finding that having `overflow-x` on the body tag caused the scroll events to not fire either! Reproduced in both Chrome and Firefox. — BU0, Sep 19 '18 at 21:14
@BU0 I have also found that to be the case ( in fact your comment just solved a perplexing problem I was having). Thanks. — Cheryl Velez, May 30 '19 at 14:46

score 125 · Accepted Answer · edited Apr 17 '19 at 02:08

125

Your CSS is actually setting the rest of the document to not show overflow therefore the document itself isn't scrolling. The easiest fix for this is bind the event to the thing that is scrolling, which in your case is div#page.

So its easy as changing:

$(document).scroll(function() {  // OR  $(window).scroll(function() {
    didScroll = true;
});

to

$('div#page').scroll(function() {
    didScroll = true;
});

edited Apr 17 '19 at 02:08

OGHaza

4,795
7
23
29

answered Apr 16 '11 at 13:52

Charlie Sheather

2,374
6
20
21

1

Ok, so what generally one should pay attention to when designing a page like the one from the opening post? Are there more cases that can trigger such problems? – zpavlinovic Apr 18 '12 at 21:34
1

wow man u made my day . been stuck on this problem the whole day . div#pageUp in my case works great! . time for a cigar – neuro_tarun Apr 03 '15 at 06:36
1

brilliant! I had a similar problem with an offcanvas nav – Michel Arteta Aug 12 '15 at 00:34
6

The problem for me was html, body { height: 100%; ... } this caused the scrolling not to work (default in a grails app) – V H Apr 11 '16 at 01:10
saved my day!! been stuck with this for a while. the problem in my case was `body{ height: 100vh; }` thanks! – Altin May 03 '20 at 20:49
All this because I had overflow: hidden on the HTML tag! Thanks! – A. Fletcher Jan 13 '21 at 17:31
This answer is magical! I have no idea why this happens but you are a champ man. – Suraj Lulla Jan 24 '23 at 13:08

score 39 · Answer 2 · answered May 29 '16 at 11:39

39

My issue was I had this code in my css

html,
body {
    height: 100%;
    width: 100%;
    overflow: auto;
}

Once I removed it, the scroll event on window fired again

answered May 29 '16 at 11:39

digitalzoomstudio

1,112
1
15
30

3

I had the same problem here. Looks like the `scroll` event doesn't handles well an element with css `overflow`. That was bugging even animations with `scrollTop`... Thanks for sharing! – Clyff Jun 09 '16 at 13:36
For future reference, trying to use materializecss's pushpin component (http://materializecss.com/pushpin.html), in my case, wasn't working because of height:100% on html and body as well! – StinkyCat Feb 13 '17 at 15:21

score 5 · Answer 3 · edited Apr 22 '15 at 10:17

5

$('#div').scroll(function () {
   if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight-1) {

     //fire your event


    }
}

edited Apr 22 '15 at 10:17

Raptor

53,206
45
230
366

answered Apr 20 '15 at 07:17

Ashish Asodiya

91
1
10

Pan Bouradas · Answer 4 · 2020-12-11T09:06:08.073

4

The solution is:

 $('body').scroll(function(e){
    console.log(e);
});

edited Dec 11 '20 at 09:06

answered Oct 12 '18 at 14:14

Pan Bouradas

179
1
6

score 2 · Answer 5 · answered Mar 29 '18 at 11:59

2

To whom its just not working to (like me) no matter what you tried: <element onscroll="myFunction()"></element> works like a charm

exactly as they explain in W3 schools https://www.w3schools.com/tags/ev_onscroll.asp

answered Mar 29 '18 at 11:59

mallocthePD

83
8

score 0 · Answer 6 · answered Feb 09 '18 at 08:13

0

Nothing seemd to work for me, but this did the trick

$(parent.window.document).scroll(function() {
    alert("bottom!");
});

answered Feb 09 '18 at 08:13

LegionDev

1,391
4
15
29

score 0 · Answer 7 · answered Oct 04 '19 at 14:11

0

In my case you should put the function in $(document).ready

$(document).ready(function () {
    $('div#page').on('scroll', function () {
     ...
    });
});

answered Oct 04 '19 at 14:11

Ahmad

8,811
11
76
141

score -3 · Answer 8 · edited Jul 20 '20 at 22:36

-3

Declare your jQuery between <script> and </script> in the <head>,
Wrap your .scroll() event within

$(document).ready(function(){
  //do something
});

edited Jul 20 '20 at 22:36

Always Helping

14,316
4
13
29

answered Apr 16 '11 at 13:13

MikeM

27,227
4
64
80

nope, does not work either. will put the link online so you guys can see it (not) happening. – pixeline Apr 16 '11 at 13:20

jQuery window scroll event does not fire up

8 Answers8

Linked