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上的Ticker完全类似的是，在右侧显示您朋友最近的实时活动。）

Answer 1

原则完全相同。 div将是您的浏览器视口，div内容是您的文档。你只需要交换

$(window).scroll() - ＆gt; $("#someDiv").scroll()
$(window).scrollTop() - ＆gt; $("#someDiv").scrollTop()
$(document).height() - ＆gt; $("#someDiv")[0].scrollHeight
$(window).height() - ＆gt; $("#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';    
}

网页div中的“无尽滚动”

3 个答案: