Getting Started

This section will walk you through the basics of using the ScrollView component library and helper methods.

Basic Usage

ScrollView works by accepting components in a scoped slot. Placing a component into a scroll-view slot allows ScrollView to begin tracking that components visibility within the viewport. Refer to the following example:

<!-- a parent component -->
<Scroll-view>
    <template slot-scope="visibility">
        <my-component key="a" :visible="visibility.a"></my-component>
    </template>
</Scroll-view>

In my-component:

<template>
    <p>{{ visible ? 'i am visible!' : 'i am not visible...' }}</p>
</template>

...
props: {
    visible: {
        default: () => false
    }
}

In this example, we have a scroll-view component with my-component placed in it's slot. my-component has a key of 'a' and a visible prop bound to visibility.a. When visible is true, "i am visible" renders in my-component . Otherwise, "i am not visible" is rendered. Here we've called the prop "visible", however any name may be used.

In practice, you would likely have more than one component slotted in scroll-view, but only one is shown here for the sake of simplicity.

key

A key is required for any component placed within a scroll-view slot, as ScrollView uses component keys internally to track visibility. This key must be unique across all components placed in a scroll-view.

visibility

In this example, we used visibility as the "temporary" slot-scope variable (any name may be used here). visibility is simply an object. The keys are the component keys set via key and the values are booleans denoting a components visibility within the viewport. In this example, this the visibility object would look like this:

{
    a: false
    // where 'a' is the key for <my-component /> and 'false' is indicating it's not visible.
}