Question

我想在我的网站上显示阅读位置指示器。不幸的是，该网站比阅读的文本长得多。内容位于一个名为＆＃34; content-wrapper＆＃34;。

的单个DIV中

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

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

这是我的JS代码：

<div class="item item-1" fxFlex="50%" fxFlexOrder="1">
      <mat-form-field>
          <input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
           <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
           <mat-datepicker #picker2></mat-datepicker>
      </mat-form-field>
</div>

Answer 1

您正在使用整个窗口的高度。你应该使用＆＃34;你的div＆＃34;。像：

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

Answer 2

您将要设置：

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

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

2 个答案: