fuz-scroll.js

// create viewer element
init = () => {
  const renderer = document.querySelector('#renderer')
  const viewer = document.createElement('div')
  viewer.style = `
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: white;
`
  renderer.appendChild(viewer)
  const leftCover = document.createElement('div')
  leftCover.style = `
    position: fixed;
    top: 0;
    bottom: 0;
    background: black;
    z-index: 100;
    left: 0;
    right: 78.4%;
`
  const rightCover = document.createElement('div')
  rightCover.style = `
    position: fixed;
    top: 0;
    bottom: 0;
    background: black;
    z-index: 100;
    left: 78.4%;
    right: 0;
`
  viewer.appendChild(leftCover)
  viewer.appendChild(rightCover)
  return viewer
}
// copy image from original canvas
loadCanvas = (viewer) => {
  const viewport0 = document.querySelector('#viewport0')
  const viewport1 = document.querySelector('#viewport1')
  const activeViewport = viewport0.style.visibility === 'hidden' ? viewport1 : viewport0
  const originalCanvas = activeViewport.querySelector('canvas')

  const newCanvas1 = originalCanvas.cloneNode()
  const newCanvas2 = originalCanvas.cloneNode()
  viewer.appendChild(newCanvas1)
  viewer.appendChild(newCanvas2)
  newCanvas1.getContext('2d').drawImage(originalCanvas, 0, 0)
  newCanvas2.getContext('2d').drawImage(originalCanvas, 0, 0)
  newCanvas1.style.transform = 'translateX(-21.6%)'
  newCanvas2.style.transform = 'translateX(21.6%)'
}
viewer = init()
loadCanvas(viewer)

// scroll down to load next image
scrollLoad = () => {
  // copy image when RENDER_FINISH event triggered
  $('#renderer').one(NFBR.a6G.Event.RENDER_FINISH, () => {
    loadCanvas(viewer)
    $(viewer).on('scroll', onScroll)
  })
  
  // trigger next page event
  const e  = $.Event(NFBR.a6G.Event.CLICK)
  e.pageX = 0;
  e.pageY = 200;
  $('#viewer').trigger(e)
}
onScroll = () => {
  if (viewer.scrollTop + viewer.offsetHeight > viewer.scrollHeight * 0.8) {
    $(viewer).off('scroll', onScroll)
    scrollLoad()
  }
}
$(viewer).on('scroll', onScroll)