Implementation Notes & Caveats

This section provides a high level outline of how ScrollView works under the hood, which can be useful for navigating any edge-cases not covered in the docs.

Initialization

ScrollView utilizes the Vue.js scoped-slots API to gain access to the component instances slotted into a scroll-view component. When a ScrollView mounts, it pass all of its children to a initialization method which has access to a state object maintained by the ScrollView plugin. This initialization method iterates each of the scroll-view children and determines their location on the page based on the instance root element. To enable server-side rendering compatibility, the first scroll-view component mounted notifies the plugin to attach the scroll listener to the document. The listener is throttled to 50ms call intervals with lodash.throttle (https://www.npmjs.com/package/lodash.throttle).

Cacheing

For performance reasons, ScrollView caches component locations on the state object so they do not need to be re-queried on every scroll event. The components are referenced by the key they are assigned in the scroll-view. This cache is invalidated and refreshed under 2 circumstances:

1. The height of the document changes, indicating an element was added or removed from the DOM.
2. $scrollview.refresh() was called (see Methods & Properties)

The cache invalidation outlined in case #1 is implemented by querying the document height on a 1 second interval. If the document height changes, we assume that all components being tracked by ScrollView must be in a different location on the page. As a result, the tracking state is cleared and the ScrollView plugin emits an event on each of the scroll-view instances, causing them to repeat the initialization step and compute fresh locations. This is particularly useful behavior because Vue components are unable to detect and react to changing of their slotted components. If we didn't automatically determine when to re-cache, we'd have to manually implement this behavior which can be error prone.

In any case where you DO need to manually re-cache component locations, ScrollView provides an escape hatch in the form of $scrollview.refresh(), which manually triggers the aforementioned recache process.