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?

Salesclerk

Hope this help #2711068 – Polder

Answer 1

The correct way to implement it is:

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

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

Salesclerk

-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. – Tenon

so you can provide a better solution? – Salesclerk

Yes, any working answer without inline JavaScript would be better. – Tenon

$('#container').scroll(function() { alert('scroll'); }); See: api.jquery.com/scroll – Tenon

why is this better than my solution? – Salesclerk

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 – Tenon

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. – Chrystalchryste

Answer 2

EDIT: Since you originally 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/

Tenon

Answer 3

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

Polder

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? – Salesclerk