Multiple scroll-view

In practice, the structure of your app will likely necessitate the usage of multiple scroll-view components. This is no problem as all scroll-view shares state across all instances. scroll-view may be placed anywhere you may want to track a component or a group of components visibility.

<!-- HomePage.vue -->
<template>
    <div>
        <scroll-view>
            <template slot-scope="visibility">
                <Hero key="hero" :visible="visibility.hero"></Hero>
                <About key="about" :visible="visibility.about"></About>
                <Cta key="cta" :visible="visibility.cta"></Cta>
            </template>
        </scroll-view>
        <Services></Services>
    </div>
</template>

<!-- Services.vue -->
<template>
    <div>
        <h3>Services</h3>
        <scroll-view>
            <template slot-scope="showing">
                <Service key="service1" :show="showing.service1">ex 1</Service>
                <Service key="service2" :show="showing.service2">ex 2</Service>
                <Service key="service3" :show="showing.service3">ex 3</Service>
            </template>
        </scroll-view>
    </div>
</template>

In this example, we have a page, HomePage , with three components placed within a scroll-view . Additionally, there's a regular child component, Services, which also contains a scroll-view. With ScrollView, the component hierarchy is not important. Think of the scroll-view component as a means of "plugging" a component into tracking it's visibility.

Another note about keys: Since ScrollView tracks everything globally, slotted components keys must be unique across ALL instances of scroll-view

See also: Scrollspy Navigation example