Using scroll-marker

Sometimes you want to mark certain scroll locations on a page so you can perform some task or have the UI of your app respond in some way. ScrollView provides a means of accomplishing this by way of Scroll Markers. Scroll Markers are "invisible" components that emit events when they enter and leave visibility. They're "invisible" in the sense that they don't render anything meaningful and are only visible in the HTML markup of the page. Put simply, they're trigger points for scroll locations. Observe the following example:

<template>
    <scroll-view>
        <template slot-scope="markers">
            <scroll-marker
                v-for="marker in markerNames"
                :name="marker"
                :key="marker"
                :visible="markers[marker]"
                :spacing="800"
                @isVisible="markerVisible"
                @isNotVisible="markerNotVisible"
            ></scroll-marker>
        </template>
    </scroll-view>
</template>

...
data() {
    return {
        markerNames: ['first', 'second', 'third']
    }
},
methods: {
    markerVisible(name) {
        console.log(`marker ${name} is visible!`)
    },
    markerNotVisible(name) {
        console.log(`marker ${name} is no longer visible!`)
    }
}

Here we are creating 3 scroll-markercomponents in a scroll-view. Each scroll-marker accepts a name, spacing, and visible prop. Additionally, scroll-marker may emit two events, isVisible and isNotVisible, which predictably fire when the component enters or leave visibility. Here's an outline of each of the props and events:

props

• name: The name for the scroll marker. This is passed to the function called on isVisible and isNotVisible so you may react according to the marker triggering the event.
• visible: A boolean whether or not the marker is visible in the viewport. This is bound to the corresponding key on the markers object. If confused, refer to Getting Started.
• spacing: Applies margin-top in pixels to the scroll-marker to space it further down the page.
• key: Required for any component in a scroll-view. See Getting Started

events

• isVisible: This event is emitted from the scroll-marker when it becomes visible. The handler ("markerVisible", in this case) receives the name of marker as assigned via the name prop.
• isNotVisible: The opposite of isVisible -- triggered when the scroll-markerleaves visibility. Also receives the markers name in the handler.

While this is a fairly contrived example, it demonstrates how you might use Scroll Markers as trigger points to perform a task. In this case, the "task" is simply a console.log. However you could just as easily fetch some async data, trigger a route change, animate an element with GreenSock, or trigger a Google Analytics event... just to name a few possibilities.

See also: Components, Scroll Markers example