基于 DIV 而不是整个页面的阅读位置指示器

Question

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

的单个 DIV 中

目前我正在使用 HTML5 进度元素（https://dev.w3.org/html5/spec-preview/the-progress-element.html) and added it to my site like in this example: 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);
  });
});

Answer 1

您正在使用整个 window 的高度。你应该使用 "your div's height"。喜欢：

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

Answer 2

您需要设置：

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

基于 DIV 而不是整个页面的阅读位置指示器

Reading Position Indicator based on DIV instead of the whole page

html

javascript

css

jquery

progress