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

Question

所以我们在我们正在构建的应用中遇到了这个问题。

我们有一个div，其高度是根据视口计算的（假设它是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来获取滚动条的长度而不是divs height值（因为DOM由于某种原因没有被更新），然后使用该值进行数学计算，公式最终为：

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