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

我想在我的网站上显示阅读位置指示器。 不幸的是，该网站比阅读的文本长得多。 内容位于名为“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); }); }); 

Answer 1

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

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