Vueport NPM | npm.io

VuePort

Vueport is a set of Vue JS data provider components designed to make it easy to add scroll effects to your Vue application.

Getting started

To add VuePort to your app simply run npm install vueport. Once installed it exposes two components that you can import.

import {
    VueportPageScroll,
    VueportElementPosition
} from "vueport";

Using `VueportPageScroll`

The VueportPageScroll component uses scoped slots to provide the current scroll position to your components. It can be used to build page progress indicators, animations that depend on the overall scroll position, etc.

<vueport-page-scroll>
    <div slot-scope="scrollPosition">
        ...
    </div>
</vueport-page-scroll>

Exposed values

VueportPageScroll makes the following values available to you:

scrollY The current value of window.scrollY
scrollHeight The current value of window.documentElement.scrollHeight
clientHeight The current value of window.documentElement.clientHeight
scrollableHeight The height of the scrollable area of the document.
scrollPcnt The current percentage of the page that has been scrolled.

Using `VueportElementPosition`

The VueportElementPosition component uses scoped slots to provide the current position of the component it wraps relative to the device viewport.

<vueport-element-position>
    <div slot-scope="elementPosition">
        ...
    </div>
</vueport-element-position>

Exposed values

VueportElementPosition makes the following values available to you:

boundingClientRect The current BoundingClientRect for the component
visible Boolean. Whether the component is currently visible on the viewport
fullyVisible Boolean. Whether the component is currently fully visible on the viewport
shown Boolean. Whether the component has been shown. This is set to true when then visible first becomes true and remains so for the rest of the component lifecycle
topPcnt The position of the top of the element relative to the top of the viewport as a percentage
bottomPcnt The position of the bottom of the element relative to the top of the viewport as a percentage
center The vertical position of the center of the element in pixels
centerPcnt The position of the center of the element relative to the top of the viewport as a percentage

Coming Soon

VuePort is still a work in progress and is being added to all the time there will be more features added to both components and more components added in the near future. I will also be working on improving the documentation including a demo site built using VuePort and some examples of how to build cool scrolling animations using VuePort.