Question

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

编辑：

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

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

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

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

< / LI>

＆＃13;

    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')
        }
  })

＆＃13;

Answer 1

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

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

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

<强> EDIT1：

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

<强> EDIT2：

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

<强> EDIT3

返回edit1解决方案，但是从get 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>

希望有所帮助

滚动到底部后启用按钮

1 个答案: