Reading Position Indicator based on DIV instead of the whole page

问题

I want to show a Reading Position Indicator on my site. Unfortunately, the site is much longer than the text to read. The content is inside a single DIV called "content-wrapper".

At the moment I'm using the HTML5 progress element (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/

It's working fine so far. The problem is, that the progress is calculated based on the lenght of the whole page. Is there any way to limit the progress on a single DIV?

This is my JS code:

$(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);
  });
});

回答1:

You are using height of whole window. You should use "your div's height". like:

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

回答2:

You'll want to set your:

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

来源：https://stackoverflow.com/questions/47399449/reading-position-indicator-based-on-div-instead-of-the-whole-page