网页上的div中的“无尽滚动”

Question

I want to create a div containing endless scrollable content in a page.

For recognizing the end of the scrollable content in order to load more data from the data base I've written the following:

$(window).scroll(function(){

  var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
  var  scrolltrigger = 0.95;

  if  ((wintop/(docheight-winheight)) > scrolltrigger) {
     lastAddedLiveFunc();
  }
});

Question: The following code is for creating the endless scroll which fits in the entire webpage, but how can I write the same for a 'div' inside a web page?

(Hint: An exact similar thing is the Ticker on Facebook, on the right side which shows the recent activities of your friends in real time.)

Answer 1

The principle is the exact same. The div will be your browser viewport, and the div content is your document. You just need to exchange

• $(window).scroll() --> $("#someDiv").scroll()
• $(window).scrollTop() --> $("#someDiv").scrollTop()
• $(document).height() --> $("#someDiv")[0].scrollHeight
• $(window).height() --> $("#someDiv").height()

and it should work.

Note that:

• scrollHeight is a property, not a function.
• scrollHeight isn't jQuery, so you need to obtain it from the actual javascript element of the selector, hence the [0] addition. Another way is to use $("#someDiv").prop("scrollHeight").

Answer 2

$("#yourdiv").scroll(function(){

//your logic
}

You can use your div instead of window

For example

$('#yourdiv').scrollTop()  //  etc

Answer 3

use this

// get box div position
var box = document.getElementById('box').offsetTop;

window.onscroll = function(){

    // get current scroll position
    var scroll_top = document.body.scrollTop || document.documentElement.scrollTop;

    document.getElementById('scbox').innerText = scroll_top + ' ' + box;

    // if current scroll position >= box div position then box position fixed
    if(scroll_top >= box)
        document.getElementById('box').style.position = 'fixed';
    else
        document.getElementById('box').style.position = 'relative';    
}