How to capture scroll event?

Question

I want to implement infinite scrolling. Below is a short form of my layout. Since I have some elements relative positioned the javascript scroll event does not fire.

How can I fix this problem in order to get the scroll event to be fired and implement the infinite scrolling?

My main layout is:

<div id="container">
    <div class="wrapper">
        <div id="header">
        ...
        </div> <%-- header --%>

        <div id="main">
        ...
        </div>

    </div> <%-- wrapper --%>
</div> <%-- container --%>
<div id="footer">
</div>

And my CSS is:

#container {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 35px;
    left: 0;
    right: 0;
    overflow-y: auto;      
    overflow-x: hidden;      
}

.wrapper {
    margin: 0 auto;
    width: 960px;
    position: relative;
}   

#header {
    position: relative;
}

#main {
}

#footer {
    z-index: 2;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35px;
}

What do I have to change such that I can receive the browser scroll event with my layout to implement infinite scrolling?

Hope this help http://stackoverflow.com/questions/2710568/css-achieving-two-way-infinite-scroll-with-mouse-drag — arrest warrant, Nov 21 '12 at 11:54

score 16 · Accepted Answer · edited Sep 07 '19 at 00:14

16

The correct way to implement it is:

 <div id="container" onScroll="handleOnScroll();">

<script>
function handleOnScroll() {
        alert("scroll");
    };
</script>

edited Sep 07 '19 at 00:14

Erik Grosskurth

3,309
4
22
40

answered Nov 28 '12 at 00:01

confile

29,115
44
187
340

3

-1 for not leveraging the power of jQuery to avoid using inline JavaScript. I also fail to see what any of that has to do with "infinite" scrolling. – Sparky Nov 28 '12 at 00:04
so you can provide a better solution? – confile Nov 28 '12 at 00:08
2

Yes, any working answer without inline JavaScript would be better. – Sparky Nov 28 '12 at 00:09
`$('#container').scroll(function() { alert('scroll'); });` See: http://api.jquery.com/scroll/ – Sparky Nov 28 '12 at 00:12
14

why is this better than my solution? – confile Nov 28 '12 at 01:11
1

Again, simply because there is no "inline" JavaScript. And why did you tag your question with `jQuery` if you didn't want to use it? [Read the accepted answer on this question including the linked article](http://stackoverflow.com/questions/6015611/how-bad-it-is-inline-js-calls-with-external-handlers-definition-vs-totally-ext) – Sparky Nov 28 '12 at 01:45
1

Though this might not be a good solution, it's perfectly good answer to the question. This question is not about code quality, nor about jQuery. It's just a basic "How do you do X?" question. Many people don't use jQuery, and even compile to JS in other languages, so this answer still tells them what they need to know. – Elliot Cameron Sep 12 '19 at 15:40

Sparky · Answer 2 · 2018-11-05T15:28:16.570

8

EDIT: Since you tagged your question with jquery...

To capture the scroll event using jQuery...

HTML:

<div id="container">
    CONTENT
</div>

jQuery:

$(document).ready(function() {

    $('#container').scroll(function() {
        alert('scroll');
        // presumably your infinite scrolling code here
    });

});

See: http://api.jquery.com/scroll/

edited Nov 05 '18 at 15:28

answered Nov 28 '12 at 00:17

Sparky

94,381
25
183
265

score 4 · Answer 3 · answered Nov 21 '12 at 12:02

4

This is what i used in my code...

 <div id="DataDiv" style="overflow: auto; width: 280px; height:400px; margin-top: 10px;"
                    onscroll="Onscrollfnction();">
      my content here 
 </div>

Function is as below

function Onscrollfnction() {
            var div = document.getElementById('DataDiv');
            div.scrollLeft;
            return false;
        };

After content crossing 400px, scrolling will start and will be infinite.. enjoy

answered Nov 21 '12 at 12:02

arrest warrant

346
2
17

But how can I guarantee, that the footer is always at the bottom with different screen sizes? At which position should I enter your code? – confile Nov 23 '12 at 10:01

How to capture scroll event?

3 Answers3

Linked