What is ScrollView?
ScrollView is a Vue.js plugin that includes a set of components and methods for facilitating UI interactions tied to scrolling in your app. For example, ScrollView may be used to create infinitely scrolling content, trigger lazy load resources, animate components based on visibility with a third-party library like GreenSock, or easily create UI elements such as scrollspy navigations. This guide assumes an intermediate understanding of Vue.js.
ScrollView's primary component, scroll-view
, utilizes a scoped slot to determine when slotted components enter or leave visibility within the browser viewport. Slot components receive a prop that reflect it's visibility.
See the live demos
Code Sample
<scroll-view>
<template slot-scope="visibility">
<my-component key="a" :visible="visibility.a"></my-component>
<another-component key="2" :visible="visibility[2]"></another-component>
<foo key="bar" :visible="visibility.bar"></foo>
</template>
</scroll-view>
Compatibility & Browser support
Browsers: IE 11+, Safari 7.1+, Chrome, Firefox
SSR: Fully compatible.