我想显示pdf阅读模块的进度条。我想在阅读器向下滚动包含PDF文件的容器时显示进度。现在我已经为此应用了jquery，但是出现了一些问题而没有获得预期的结果。这里的问题是进度条确实显示了进度但它只适用于整个窗口滚动。我想要的是在该窗口中向下滚动pdf容器时显示条形图上的进度。我为此制作了代码，但不知何故它对pdf-container没有反应。任何建议和帮助将受到高度赞赏。
以下是显示PDF的<div>
<div id="viewer" class="pdf-viewer" oncontextmenu="return false" data-url="../sadmin/studyMaterial/<?php echo $db->idToField("tbl_studymaterials", "file_ppt", $chapterId) ; ?>"></div>
<span><progress id="progressbar" value="0" max="100"></progress></span>
我正在使用的jquery是，
$(".pdf-viewer").scroll(function () {
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
scrollPercent = (s / (d-c)) * 100;
var position = scrollPercent;
$("#progressbar").attr('value', position);
});
答案 0 :(得分：0)
您正在为脚本中的scrollTop()值引用不正确的DOM节点。由于您要跟踪PDF容器的滚动位置，因此您只需引用它自己的$(this).scrollTop()值，即this.scrollHeight。
此外，您应该检查元素的scrollHeight以获取其全部内容高度，而不是检查文档高度。该属性是DOM节点的原生属性，因此您只需使用$(".pdf-viewer").scroll(function () {
var s = $(this).scrollTop(),
d = this.scrollHeight,
c = $(this).height(),
position = (s / (d-c)) * 100;
$("#progressbar").attr('value', position);
});
。
这是更新后的代码：
$(".pdf-viewer").scroll(function() {
var s = this.scrollTop,
d = this.scrollHeight,
c = this.clientHeight,
position = (s / (d - c)) * 100;
$("#progressbar").attr('value', position);
});
实际上，您甚至不需要使用jQuery方法来检索维度：
Element.scrollTop代替.scrollTop()来检索滚动位置Element.clientHeight代替.height()来检索元素定义的高度（无底部滚动条，如果有的话）你明白了：
$(function() {
$(".pdf-viewer").scroll(function() {
var s = this.scrollTop,
d = this.scrollHeight,
c = this.clientHeight,
position = (s / (d - c)) * 100;
$("#progressbar").attr('value', position);
});
});带有虚拟DOM的概念验证示例：
#viewer {
width: 500px;
height: 100px;
overflow-y: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewer" class="pdf-viewer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
</div>
<span><progress id="progressbar" value="0" max="100"></progress></span>var viewer = document.getElementById('viewer');
viewer.addEventListener('scroll', function() {
var s = this.scrollTop,
d = this.scrollHeight,
c = this.clientHeight,
position = (s / (d - c)) * 100;
document.getElementById('progressbar').value = position;
});
如果您不想使用jQuery，那也完全有可能：
#viewer {
width: 500px;
height: 100px;
overflow-y: auto;
}<div id="viewer" class="pdf-viewer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
</div>
<span><progress id="progressbar" value="0" max="100"></progress></span>public virtual void Build(ReportType reportType, ReportParameters parameters)
{
Export = reportType.Id == MaterialReportIds.WarehouseBalanceDynamic;
var tempFileName = Path.GetTempFileName();
try {
ServiceManager<IMaterialsReportsDataService>.Invoke(service =>
{
using (var stream = service.BuildReport(reportType, parameters)) {
using (var fileStream = File.Create(tempFileName)) {
int buf;
while ((buf = stream.ReadByte()) >= 0) {
fileStream.WriteByte((byte)buf);
}
fileStream.Flush();
fileStream.Close();
stream.Close();
}
}
});
Report.LoadPrepared(tempFileName);
}
finally {
File.Delete(tempFileName);
}
}