jquery - 如何计算滚动条相对于嵌套 div 内容的距离

Question

因此，我们在当前正在构建的应用程序中遇到了这个问题。

我们有一个 div，它的高度是根据视口(viewport)计算的(为了简单起见，假设它是 800px)并且具有 overflow-y: auto 的属性。

在这个 div 中，我们有一个容器来显示我们的内容，它通常比它的父级 div 长。当用户滚动到内容底部时，我们会触发一个方法来加载更多数据(想想无限滚动)。我们遇到的问题是，一旦父 div 的滚动条超过原始触发点，每个后续滚动操作都会再次触发该方法，因为滚动偏移量大于父 div 高度。

有没有办法计算相对于内部 div 内容高度的偏移量？我们想以某种方式基于百分比，比如当滚动条到达底部的 98% 时，触发加载更多数据的方法，然后根据新的内容高度重新计算滚动位置。我们目前的功能如下:

// Smart Loading Method
Flight.$.listViewAjaxLoader = function() {
console.log ('Ajax Loader Method Called');
var contentLoadTriggered = false,
  listViewPane = $('#agenda_viewer'),
  offset = 0,
  limit = 25;

$(listViewPane).scroll( function() {
contentLoadTriggered = false;

console.log( $(listViewPane).scrollTop(), $(listViewPane).height() );

if ( $(listViewPane).scrollTop() >= $(listViewPane).height() && contentLoadTriggered == false ) {
  contentLoadTriggered = true;
  console.log('load trigger status:' + contentLoadTriggered);
}

if ( contentLoadTriggered == true ) {
  offset = offset + limit;
      $.get("removed for security", function(response) {
    var assetsArray = response.data.assets,
    assetCount = assetsArray.length,
    start =    Flight.view_state.campaigns[Flight.$._globals.thisCampaign].list_view.start,
    dateFormatForCampaign = 'YYYY-MM-DD',
    newData = '';

    start = moment(start, dateFormatForCampaign);

    for (var i = 0; i < assetCount; i++) {
      var asset = assetsArray[i],
          flight = asset.flight;

      newData += Flight.$.agendaAssetRowHTML(flight, asset, start);
    }
    $(listViewPane).append(newData);
    $('.agenda-toggle-all.agenda-collapse-all').trigger('click');
  });
}
});
}

这是元素如何显示和布局的快速模型

Answer 1

所以，我们终于弄明白了。我们最终使用 scrollHeight 来获取滚动条的长度而不是 div 的高度值(因为由于某种原因 DOM 没有更新)，然后使用该值进行数学运算，公式最终为:

listViewPane = $('#agenda_viewer');
var scrollPercentage = ( listViewPane.scrollTop() / ( listViewPane[0].scrollHeight - listViewPane.height() ) )* 100 ;