在網頁div上的'無盡的滾動'

我想在頁面中創建一個包含無限可滾動內容的div。在網頁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上的北京時間，右側這實時顯示最近你的朋友的活動。）

來源

2014-02-12 user3286556

的原理是完全一樣的。 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」）。

來源

2014-02-12 07:12:53 stafffan

你知道scrollHeight屬性的jQuery的等值？我知道我可以使用它在jQuery 1.7中發佈：$（「＃dvContent」）。prop（「scrollHeight」）;但是你知道任何純jQuery等價物嗎？ – user3286556

不要以爲它存在。 $（「＃dvContent」）。prop（「scrollHeight」）或$（「＃dvContent」）[0] .scrollHeight似乎是您唯一的選擇。 – stafffan

我試過使用它，但它不起作用。請你看看它，讓我知道我錯了什麼，並保存我的生活:(？！ http://jsfiddle.net/cyrus2013/FQSx4/2/ – user3286556

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

//your logic 
}

您可以使用DIV，而不是窗口

例如

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

來源

2014-02-12 07:08:18 Prashobh

使用本

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

來源

2014-02-12 07:20:07 giraysam

var scroll_top = document.body.scrollTop || document.documentElement.scrollTop; – giraysam

你的回答看起來很有趣！你能舉例JSFiddle嗎？！ – user3286556

http：// jsfiddle。淨/ giraysam/Cdf6b / – giraysam

在網頁div上的'無盡的滾動'

回答

相關問題