基于DIV而不是整个页面读取位置指示器答案

【问题标题】：Reading Position Indicator based on DIV instead of the whole page基于DIV而不是整个页面读取位置指示器
【发布时间】：2017-11-20 19:16:55
【问题描述】：

我想在我的网站上显示阅读位置指示器。不幸的是，该站点比要阅读的文本长得多。内容位于名为“content-wrapper”的单个 DIV 中。

目前我正在使用 HTML5 进度元素 (https://dev.w3.org/html5/spec-preview/the-progress-element.html) 并将其添加到我的网站，如下例所示：https://css-tricks.com/reading-position-indicator/

到目前为止一切正常。问题是，进度是根据整个页面的长度计算的。有没有办法限制单个 DIV 的进度？

这是我的 JS 代码：

$(document).on('ready', function() {  
  var winHeight = $(window).height(), 
      docHeight = $(document).height(),
      progressBar = $('progress'),
      max, value;

  /* Set the max scrollable area */
  max = docHeight - winHeight;
  progressBar.attr('max', max);

  $(document).on('scroll', function(){
     value = $(window).scrollTop();
     progressBar.attr('value', value);
  });
});

【问题讨论】：

据我所知，你想要这个。 ` var winHeight = $('#div').height(), docHeight = $('document').height(),`
太好了，把它改成答案，我会接受的:)
如果这个答案解决了你的问题，那么你也可以接受这个答案。
我不得不等几分钟

标签： javascript jquery css html progress

【解决方案1】：

您正在使用整个窗口的高度。你应该使用“你的 div 的高度”。喜欢：

var winHeight = $('#div').height(), docHeight = $('document').height(),

【讨论】：

【解决方案2】：

您需要设置：

var docHeight = &amp;('#content-wrapper').height();

【讨论】：