Rework virtual Scrolling

[Webreaper]

• Virtual folder list scrolling should be able to work regardless of the container size. Use the 'All' item to dynamically calculate the item height at runtime, and then use the container size to calculate scroll size and position.
• Virtual image scroller should be smarter about pre-loading new results before the bottom of the page is hit (i.e., during scrolling)

[Webreaper]

Better approach:

1. Find n-20 item in the list of images
2. Wire it up to an observer as below
3. The first time it scrolls into view, a) trigger LoadMore(), and b) stop observing it, and observe the next n-20 item.

https://stackoverflow.com/questions/487073/how-to-check-if-element-is-visible-after-scrolling

// this is the target which is observed
var target = document.querySelector('div')

// configure the intersection observer instance
var intersectionObserverOptions = {
  root: null,   // default is the viewport
  threshold: .5 // percentage of the taregt visible area which will trigger "onIntersection"
}
    
var observer = new IntersectionObserver(onIntersection, intersectionObserverOptions)

// called when target is fully visible
function onIntersection(entries, opts){
  entries.forEach(entry => {
    var visible = entry.intersectionRatio >= opts.thresholds[0]
    
    console.clear();
    console.log(entry.intersectionRatio.toFixed(2), visible)
    
    target.classList.toggle('visible', visible)
  })
}

// provide the observer with a target
observer.observe(target)

// To stop watching, do:
// observer.unobserve(entry.target)