Components

These are the components included in the ScrollView component library.

scroll-view

• Props:
  • offset- number, The height of the buffer zone in pixels at the top and bottom of the viewport a component must pass before being considered visible. Defaults to 200.
  • tag - string, The tag to use for the component's root. Defaults to span.
• Usage:

<Scroll-view :offset="200" tag="span">
    <template slot-scope="visibility">
        <Example key="ex" :visible="visibility.ex"></Example>
    </template>
</Scroll-view>

• See also: Getting Started, Multiple Scrollviews

scroll-marker

• Props:
  • name - Required. string, The name of scroll-marker that gets passed to emitted with events isVisible and isNotVisible.
  • visible - boolean, Indicates whether scroll marker is visible or not.
  • spacing - number, Applies margin-top to scroll-marker element to help position on page defaults to 300px.
  • debug - boolean, Makes scroll-markers visible as red lines accompanied by their name for easy debugging of scroll trigger points.
• Events:
  • isVisible- Emitted when scroll-marker becomes visible. passes nameto handler.
  • isNotVisible - Emitted when scroll-marker leaves visibility. passes name to handler.
• Usage:

<scroll-view>
    <template slot-scope="visibility">
        <scroll-marker
            key="ex"
            name="test"
            :visible="visibility.ex"
            :spacing="800"
            :debug="true"
            @isVisible="markerVisible"
            @isNotVisible="markerNotVisible"
        ></scroll-marker>
    </template>
</scroll-view>

• See also: Scroll Markers