基于DIV而不是整个页面的阅读位置指示器 [英] Reading Position Indicator based on DIV instead of the whole page

问题描述

我想在我的网站上显示一个阅读位置指示器. 不幸的是，该网站比阅读的文字长得多. 内容位于一个名为"content-wrapper"的DIV中.

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".

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

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/

到目前为止，一切正常.问题是，进度是基于整个页面的长度计算的.有什么方法可以限制单个DIV的进度吗?

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?

这是我的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);
  });
});

推荐答案

您正在使用整个窗口的高度. 您应该使用您的div的高度". 像:

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

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

这篇关于基于DIV而不是整个页面的阅读位置指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！