CODEWITHSUNDEEP
jqueryhtmlcssscrolljquery-events
sultan
sultan

Reputation: 6058

Scroll event handling like Twitter and Facebook

I've been trying to bind scroll event to an element on the page, and on scroll load more content like Twitter or Facebook do.

HTML

<div id="main-content">
    <ul class="event-list big row" id="event-list">
    ...
    </ul>
</div>

CSS

#main-content {
    width: 984px;
    overflow: visible;
    margin: 0 auto;
    color: #101010;
    width: 974px;
    padding: 10px 0 7px 0;
}
#main-content .event-list.big {
   width: 1080px;
   padding: 0 0 20px 0;
}

JS code

$('#event-list').scroll(function() {
    var curScroll = $(this)[0].scrollTop,
        maxScroll = $(this)[0].scrollHeight - $(this).height();

    console.log(curScroll, ' :: ', maxScroll);

    if ((curScroll >= maxScroll - 200) && !loading) {
        loading = true;

        $(this)[0].scrollTop = curScroll;

        $('.loading').fadeIn('fast');

        if (page <= $('.page').length) {
            loadMore();
        }
    }
});

The scroll event is not triggered when I scroll its even doesn't print out curScroll and maxScroll.

What may cause the problem at all, maybe CSS styles are wrong or my js code wrong?

Upvotes: 1

Views: 22785

Answers (3)

Abhishek Sinha
Abhishek Sinha

Reputation: 5123

When you set css property of your body something like

body {height: 100%;overflow: auto;} // or visible
Now, $(window).scroll();  will not work.

It will cause jquery scroll event to not work because the dom is not scrollable. So you must either remove overflow property or set it to scroll.

Upvotes: 3

Dave
Dave

Reputation: 1055

Here's a working example of what I believe you want with the scrolling event triggering. Use the div as a scrollable region by setting 'overflow: scroll'. Note: you will only get the scroll event if the list is long enough on the initial load. (See the height property on main-content. I'll leave the ajax loading up to you. :)

CSS

 #main-content {
    width: 984px;
    overflow: scroll;
    margin: 0 auto;
    color: #101010;
    width: 974px;
    height: 100px;
    padding: 10px 0 7px 0;
}
#main-content .event-list.big {
   width: 1080px;
   padding: 0 0 20px 0;
}

Script

$(document).ready(function() {
            $('#main-content').scroll(function() {
              var curScroll = $(this)[0].scrollTop,
                  maxScroll = $(this)[0].scrollHeight - $(this).height();

              console.log(curScroll, ' :: ', maxScroll);

              if ((curScroll >= maxScroll - 200) && !loading) {
                  loading = true;

                  $(this)[0].scrollTop = curScroll;

                  $('.loading').fadeIn('fast');

                  if (page <= $('.page').length) {
                      loadMore();
                  }
              }
            });
        });

HTML

<div id="main-content">
    <ul class="eventlist big row" id="event-list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
</div>

Upvotes: 3

ohcibi
ohcibi

Reputation: 2698

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

The scroll event is only triggered on elements like window, frame, iframe and ones that have overflow: (scroll|auto) and their content must be greater then the available width/height. So I suggest you add

#event-list {
    overflow: auto;
}

If you want to listen for when the user scrolls to a specific element, you should listen on the scroll event of window and then check for the scroll coordinates.

$(window).scroll(function() { /** ... **/ });

Upvotes: 3

Related Questions