滚动到底部后启用按钮

Question

基本上我想要做的是在用户滚动模式中的 pdf 文件后（有点像弹出窗口），模式底部的按钮应该变为活动状态。

编辑：

主要问题是我上传的 pdf 大小不同（用户可以将其上传到系统），所以我无法定义它的确切高度。另外我不得不使用 pdfjs 来上传文件，所以它引起了更多的问题（显然不可能将滚动事件添加到非常 pdf (https://github.com/pipwerks/PDFObject/issues/58#event-603169061).)

所以经过一些试验和错误后，我是这样做的：

1. 已下载 pdfjs https://mozilla.github.io/pdf.js/（很酷的东西）。 以下是有关它的更多信息 - https://developer.tizen.org/community/tip-tech/displaying-pdf-files-pdf.js-library

2. 一页一页地渲染我的 pdf，将页面添加到添加了滚动事件的现有元素，并通过将页面数乘以一页的高度来找出 pdf 文件的高度：

    PDFJS.getDocument('some/pdf.pdf').promise.then(function(pdf) {
        thePdf = pdf;
        var viewer = angular.element(document.querySelector('#pdf-scroller') );

        for(var page = 1; page <= pdf.numPages; page++) {
          var canvas = document.createElement('canvas');
          canvas.className = 'pdf-page-canvas';
          viewer.append(canvas);
          renderPage(page, canvas);
        }
    });

    function renderPage(pageNumber, canvas) {
        thePdf.getPage(pageNumber).then(function(page) {
          var viewport = page.getViewport(scale);
          canvas.height = viewport.height;
          canvas.width = viewport.width;
          page.render({canvasContext: canvas.getContext('2d'), viewport: viewport});
    });
  }

    angular.element(document.querySelector('#pdf-scroller') ).bind('scroll', function(){

        var wrapper = angular.element(document.querySelector('#pdf-scroller') );
        var agreementTextElement = document.getElementsByClassName('pdf-page-canvas')[0]
        var pagesNo = document.getElementsByClassName('pdf-page-canvas').length
        var totalDocumentHeight = agreementTextElement.offsetHeight * pagesNo;

        if (this.scrollTop >= ((totalDocumentHeight) - wrapper.context.offsetHeight)){
            document.getElementById('closeButton').removeAttribute('disabled')
        }
  })

Answer 1

我在<object>的父<div>上添加id="pdf-wrapper，滚动时会看到div的溢出，并将div的高度设置为600px，而pdf为1000px

然后将滚动事件监听器放到 pdf-wrapper

在 div#pdf-wrapper 中滚动到内容底部时，scrollTop 为 400px（1000px - 600px），所以我将 wrapper.scrollTop 与 agreementTextElement.offsetHeight - wrapper.offsetHeight 进行比较

编辑1：

如果您想使用 body 进行滚动，请使用 document.addEventListener('scroll',function(){}) 并将正文滚动与 pdf 高度减去窗口高度进行比较，然后启用按钮

编辑2：

将模态框的高度设置为 80vh，然后在其上添加事件监听器

编辑3

返回 edit1 解决方案，但从获取 pdf id 更改为按类名查询选择器

示例代码如下

var pdf = document.querySelectorAll('.pdf')
document.addEventListener('scroll',function(){
    var agreementTextElement = document.getElementById('uniqueTCid')
    if (document.body.scrollTop >= pdf[0].offsetHeight - window.innerHeight){
        console.log('remove disabled attribute from button')
        document.getElementById('closeButton').removeAttribute('disabled')
    }
  })

<div id="pdf-modal" class="modal-body">
    <div style="text-align: center;">
        <object class="pdf" data='someInfo.pdf'
                type='application/pdf'
                style="background: #999; height: 1000px;">
        </object>

    </div>
</div>
<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="text-align: right;">
        <button id="closeButton" class="button button-blue" data-ng-click="closeThisDialog(true)" disabled>
        click to close
        </button>
    </div>
</div>

希望对你有帮助