滚动到底部后启用按钮

时间:2017-11-20 17:32:52

标签: angularjs scroll modal-dialog addeventlistener pdfjs

基本上我想要做的是在用户滚动模态中的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文件的高度:

    < / LI>

    &#13;
    &#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;
    &#13;
    &#13;

1 个答案:

答案 0 :(得分: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更改为按类名

查询选择器

enter image description here

示例代码在

下面

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>

希望有所帮助