检测用户是否滚动到嵌入的 pdf 的底部

问题描述

我一直致力于让继续"按钮在用户滚动到嵌入页面的 PDF 文件底部时显示.到目前为止，我已经阅读了几个线程，这些线程基本上都说没有真正的方法来确定使用 embed/object 标签嵌入的 pdf 的底部位置.

I've been working on getting a 'continue' button to show when a user has scrolled to the bottom of a PDF file embedded on the page. So far I've read through several threads that are basically saying that there's no real way to determine the bottom position of a pdf that's been embedded using embed/object tags.

我已经尝试构建一个非常简单的脚本来在用户到达文档底部时登录控制台，但这似乎没有任何作用.

I've tried to build a pretty simple script to log in the console when the user has reached the bottom of the document, but this doesn't seem to do anything.

$(function () {
        $('#contractPDF').bind('scroll', function(e) {
                if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
            {
                console.log('End of document');
            }
        });

#contractPDF 位于这样的容器中:

The #contractPDF is in a container as such:

<embed id="contractPDF" class="pdf" width="800" height="600" src="/images/example.pdf" type="application/pdf"></embed>

有没有人有更好的解决方案，或者我应该考虑使用 pdf.js 之类的东西吗?

Does anyone have a better solution, or should I be looking at using something like pdf.js?

推荐答案

嵌入

当您使用嵌入显示 PDF 时，您当然无法控制浏览文档的状态.您只能设置页面或缩放等初始值，完整列表请参见此处 打开 PDF 文件的参数.所有渲染都由浏览器中的 PDF 插件处理.

When you use embed to display PDF of course you have no control over what's state of browsing the document. You only can set initial values like page or zoom, full list see here Parameters for Opening PDF Files. All the rendering is being handled by the PDF plugin in the browser.

PDF.js

如果您打算使用 PDF.js，那么您可以使用 PDF 查看器PDF.js 团队它经过了很好的优化和高度可定制.同样对于非常基本的自定义查看器使用 PDF.js 可以在这里找到.

If you plan to your PDF.js then you can use PDF viewer by PDF.js team it's very well optimized and highly customizable. Also for very basic custom viewer using PDF.js can be found here.

这篇关于检测用户是否滚动到嵌入的 pdf 的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！