pdf.js cont scroll

index.html

<div style="position: sticky; top: 0; background: white; ">Page <span id="page"></span> Timing: <span id="timing"></span></div>
<div id="canvases"></div>

pdf-js-cont-scroll.markdown

pdf.js cont scroll

A Pen by Sebastian Rothbucher on CodePen.

License.

script.js

const pdf = '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dGVudHMgOCAwIFI+PgplbmRvYmoKCjEwIDAgb2JqCjw8L1R5cGUvUGFnZXMKL1Jlc291cmNlcyAxNyAwIFIKL01lZGlhQm94WyAwIDAgNTk1LjMwMzkzNzAwNzg3NCA4NDEuODg5NzYzNzc5NTI4IF0KL0tpZHNbIDEgMCBSIDQgMCBSIDcgMCBSIF0KL0NvdW50IDM+PgplbmRvYmoKCjE4IDAgb2JqCjw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAxMCAwIFIKL09wZW5BY3Rpb25bMSAwIFIgL1hZWiBudWxsIG51bGwgMF0KL0xhbmcoZW4tVVMpCj4+CmVuZG9iagoKMTkgMCBvYmoKPDwvQ3JlYXRvcjxGRUZGMDA1NzAwNzIwMDY5MDA3NDAwNjUwMDcyPgovUHJvZHVjZXI8RkVGRjAwNEMwMDY5MDA2MjAwNzIwMDY1MDA0RjAwNjYwMDY2MDA2OTAwNjMwMDY1MDAyMDAwMzcwMDJFMDAzND4KL0NyZWF0aW9uRGF0ZShEOjIwMjMwOTIzMTIyOTA0KzAyJzAwJyk+PgplbmRvYmoKCnhyZWYKMCAyMAowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDY4NDcgMDAwMDAgbiAKMDAwMDAwMDAxOSAwMDAwMCBuIAowMDAwMDAwMjAwIDAwMDAwIG4gCjAwMDAwMDY5NzIgMDAwMDAgbiAKMDAwMDAwMDIyMCAwMDAwMCBuIAowMDAwMDAwNDAxIDAwMDAwIG4gCjAwMDAwMDcwOTcgMDAwMDAgbiAKMDAwMDAwMDQyMSAwMDAwMCBuIAowMDAwMDAwNjAyIDAwMDAwIG4gCjAwMDAwMDcyMjIgMDAwMDAgbiAKMDAwMDAwMDYyMiAwMDAwMCBuIAowMDAwMDA2MDIwIDAwMDAwIG4gCjAwMDAwMDYwNDIgMDAwMDAgbiAKMDAwMDAwNjIzOSAwMDAwMCBuIAowMDAwMDA2NTY3IDAwMDAwIG4gCjAwMDAwMDY3NTkgMDAwMDAgbiAKMDAwMDAwNjc5MiAwMDAwMCBuIAowMDAwMDA3MzYwIDAwMDAwIG4gCjAwMDAwMDc0NTggMDAwMDAgbiAKdHJhaWxlcgo8PC9TaXplIDIwL1Jvb3QgMTggMCBSCi9JbmZvIDE5IDAgUgovSUQgWyA8QTY0RTU4RUQxMkZDMDMxOEY1OTQ1OTA5QjlBQjVDQUY+CjxBNjRFNThFRDEyRkMwMzE4RjU5NDU5MDlCOUFCNUNBRj4gXQovRG9jQ2hlY2tzdW0gLzlBRkRFQzk4OTg1OTk2OEYwOTAyNTJGQzkyODlGRDFFCj4+CnN0YXJ0eHJlZgo3NjMzCiUlRU9GCg==' // just a demo Page 1, Page 2, Page 3
let page = 1;

let pdfDoc;

async function init() {
  pdfDoc = await pdfjsLib.getDocument({data: atob(pdf)}).promise;
  for (let pg = 1; pg <= pdfDoc.numPages; pg++) {
    const cv = document.createElement('canvas');
    cv.setAttribute('style', 'border: 1px solid darkgrey; display: block; margin: 10px 0; ');
    cv.setAttribute('id', 'canvas' + pg);
    document.getElementById('canvases').appendChild(cv);
    loadPage(pg);
  }
}

async function loadPage(num) {
  const pageObj = await pdfDoc.getPage(num);
  const viewport = pageObj.getViewport({scale: 1.0});
  const canvas = document.getElementById('canvas' + num);
  const context = canvas.getContext('2d');
  canvas.height = viewport.height;
  canvas.width = viewport.width;
  await pageObj.render({
    canvasContext: context,
    viewport: viewport
  }).promise;
}

init();

const timingByPage = {};
setInterval(() => {
  timingByPage[page] = (timingByPage[page] || 0) + 1;
  document.getElementById('timing').innerText = Object.keys(timingByPage).map(p => p + ': ' + timingByPage[p] + 's').join(' / ');
}, 1000) // i.e. we can save stats on PDFs shown and get insight into what ppl actually look at

// now we just need to know the page
document.addEventListener('scroll', () => {
  if (!pdfDoc) {
    return;
  }
  for (let pg = pdfDoc.numPages; pg >= 1; pg--) {
    if (document.getElementById('canvas' + pg).getBoundingClientRect().y < 100) {
      page = pg;
      document.getElementById('page').innerText = '' + page;
      return;
    }
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.10.111/pdf.min.js"></script>