phantomjs capture lazy load page

bettershot.js

var page = require('webpage').create()

var config = {
  screen_width: 650,
  screen_height: 1334,
  user_agent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 UTest/1.0.0',
  resource_wait: 500,
  scroll_distance: 600,
  url: 'https://gist.github.com',
  screenshot_name: 'gist.png'
}

page.viewportSize = { width: config.screen_width, height: config.screen_height }
page.settings.userAgent = config.user_agent

page.open(config.url, function() {
  var pageHeight = page.evaluate(function() {
    return document.body.clientHeight
  })
  var top = 0
  
  var t = setInterval(function() {
    if (top < pageHeight) {
      top += config.scroll_distance
      page.scrollPosition = { top: top, left: 0 }
    } else {
      page.scrollPosition = { top: 0, left: 0 }
      page.render(config.screenshot_name)
      phantom.exit()
      clearInterval(t)
    }
  }, config.resource_wait)
})

capture page with touch gesture (without scrollbar)

1. find a selector that include whole page with actually height. e.g. .my-page-content
2. find a selector that seted to device's height. e.g. .my-page

var MyPageHeight = page.evaluate(function() {
  return document.querySelector('.my-page-content').clientHeight
})

page.evaluate(function() {
  document.querySelector('.my-page').style.height = 
    document.querySelector('.my-page-content').clientHeight + 'px'

  document.querySelector('.my-page').style.width = 
    (parseInt(document.querySelector('.my-page').style.width) - 17) + 'px'
})

page.viewportSize = {
  width: config.screen_width - 17,
  height: MyPageHeight 
}

page.render(config.screenshot_name)
phantom.exit()

17 is scrollbar width