«Бесконечный свиток» в div на веб-странице

Question

Я хочу создать div, содержащий бесконечный прокручиваемый контент на странице.

Для признания конца прокрутки контента для того, чтобы загрузить больше данных из базы данных, которую я написал следующее:

$(window).scroll(function(){ 

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

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

Вопроса: Следующий код для создания бесконечного свитка, который соответствует на всей веб-странице, но как я могу написать то же самое для 'div' внутри веб-страницы?

(Подсказка: точная подобная вещь является тикер на Facebook, на правой стороне, которая показывает последние действия ваших друзей в режиме реального времени.)

Answer 1

принцип точно такой же. Div будет вашим окном просмотра браузера, а содержимое div - вашим документом. Вам просто нужно обменять

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

и он должен работать ,

Обратите внимание, что:

• scrollHeight это свойство, а не функция.
• scrollHeight не jQuery, поэтому вам нужно получить его из фактического элемента javascript селектора, следовательно, дополнение [0]. Другой способ - использовать $ ("# someDiv"). Prop ("scrollHeight").

Answer 2

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

//your logic 
} 

Вы можете использовать DIV вместо окна

Например

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

Answer 3

использование этого

// 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';  
}