Better documentation about the need to use calculate() and update(), possible CSS element queries integration

[christophemarois]

I have a layout which is prone to layout recalculation up to 1000ms after the DOMContentLoaded event, which resulted in frequent wrong calculations by basicScroll, which I managed to fix by using this common nasty method:

const instance = basicScroll.create({ /* ... */ })
instance.start()

for (let i = 0; i < 20; i++) window.setTimeout(() => {
  instance.calculate()
  instance.update()
}, 250 * i)

From the documentation, it also wasn't clear that basicScroll doesn't recalculate on window resize events, so I also added

window.addEventListener('resize', () => instance.calculate(), null)

Maybe the documentation could be made to better reflect the need to recalculate on resize, and maybe basicScroll would benefit from a ResizeSensor integration that would watch the container for size updates and trigger a recalculation.

Thanks for the great work!

[electerious]

I don't plan to integrate a ResizeSensor, but I agree that it would make sense that basicScroll at least handles calculate and update when the window size changes.

Most demos include the resize-handler code (CodePen and website), but the Usage example should get it, too.

[electerious]

Added a new track option that should make it into the next major version of basicScroll. Please take a look at it and let me know if the documentation is clear.

Documentation: https://github.com/electerious/basicScroll/blob/develop/README.md#track-window-size-changes Changes: https://github.com/electerious/basicScroll/commit/286f0bd7b16230e2987d919463e52bb3b7827714

[christophemarois]

@electerious totally clear, thanks!

[electerious]

Implemented! :)

https://github.com/electerious/basicScroll/pull/9