Installation

npm install loco-scroll

Usage

import LocomotiveScroll from "loco-scroll";

const scroll = new LocomotiveScroll();

<h1 data-scroll>Hello</h1>
<p data-scroll>Text</p>

With smooth scrolling

import LocomotiveScroll from "loco-scroll";

const scroll = new LocomotiveScroll({
    el: document.querySelector("#js-scroll"),
    smooth: true
});

<h1 data-scroll data-scroll-speed="1">Hello</h1>
<p data-scroll data-scroll-speed="2">Text</p>

With methods

import LocomotiveScroll from "loco-scroll";

const scroll = new LocomotiveScroll();
const target = document.querySelector("#js-target");

scroll.scrollTo(target);

With events

import LocomotiveScroll from "loco-scroll";

const scroll = new LocomotiveScroll();

scroll.on("call", func => {
    // Using modularJS
    this.call(...func);
    // Using jQuery events
    $(document).trigger(func);
    // Or do it your own way 😎
});

<!-- Using modularJS -->
<div data-scroll data-scroll-call="function, module">Trigger</div>
<!-- Using jQuery events -->
<div data-scroll data-scroll-call="EVENT_NAME">Trigger</div>
<!-- Or do it your own way 😎 -->
<div data-scroll data-scroll-call="{y,o,l,o}">Trigger</div>

Instance options

| Option | Type | Default | Description | | ------------------- | --------- | ---------------------- | ----------------------------------------------------------- | | el | object | document | Scroll container element. | | name | string | 'scroll' | Data attribute prefix (data-scroll-xxxx). | | offset | array | 0 | In-view trigger offset. | | repeat | boolean | false | Repeat in-view detection. | | smooth | boolean | false | Smooth scrolling. | | smoothMobile | boolean | false | Smooth scrolling on iOS and Android devices. | | direction | string | vertical | Scroll direction. | | inertia | number | 1 | Lerp intensity. | | getDirection | boolean | false | Add direction to scroll event. | | getSpeed | boolean | false | Add speed to scroll event. | | class | string | is-inview | Element in-view class. | | initClass | string | has-scroll-init | Initialize class. | | scrollingClass | string | has-scroll-scrolling | Is scrolling class. | | draggingClass | string | has-scroll-dragging | Is dragging class. | | smoothClass | string | has-scroll-smooth | Has smooth scrolling class. | | scrollbarClass | string | c-scrollbar | Scrollbar element class. | | firefoxMultiplier | number | 50 | Boost scrolling speed of Firefox on Windows. | | touchMultiplier | number | 2 | Mutiply touch action to scroll faster than finger movement. |

Element attributes

| Attribute | Values | Description | | ----------------------- | ------------------------ | ---------------------------------------------------------------------------------------- | | data-scroll | | Detect if in-view. | | data-scroll-section | | Defines a scrollable section. Splitting your page into sections may improve performance. | | data-scroll-class | string | Element in-view class. | | data-scroll-offset | string | Element in-view trigger offset (ex.: "10", "100,50%", "25%, 15%"). | | data-scroll-repeat | true, false | Element in-view detection repeat. | | data-scroll-call | string | Element in-view trigger call event. | | data-scroll-speed | number | Element parallax speed. A negative value will reverse the direction. | | data-scroll-target | string | Target element's in-view position. | | data-scroll-position | top, bottom | Window position of in-view trigger. | | data-scroll-direction | vertical, horizontal | Element's parallax direction. | | data-scroll-delay | number | Element's parallax lerp delay. | | data-scroll-sticky | | Sticky element. Starts and stops at data-scroll-target position. |

Instance methods

| Method | Description | Arguments | | -------------------------- | ------------------------------ | ------------------------------------------------------------------------------- | | init() | Reinitializes the scroll. | | | on(eventName, function) | Listen instance events ⬇. | | | update() | Updates all element positions. | | | destroy() | Destroys the scroll events. | | | start() | Restarts the scroll events. | | | stop() | Stops the scroll events. | | | scrollTo(target, offset) | Scroll to an element. | target: dom object, selector string, top or bottom offset: number |

Instance events

| Event | Arguments | Description | | -------- | --------- | --------------------------------------------------------------------- | | scroll | obj | Returns scroll instance (position, limit, speed, direction). | | call | func | Trigger if in-view. Returns your string or array if contains ,. |

Dependencies

| Name | Description | | ---------------- | ----------------------------------------------------------------- | | Virtual Scroll | Custom scroll event with inertia/momentum. | | modularScroll | Elements in viewport detection. Forked from it, not a dependency. |

Browser support

Works on most modern browsers. Chrome, Firefox, Safari, Edge...

To get IE 11 support, you need polyfills. You can use your own or include these before this script.

<script
    nomodule
    src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"
    crossorigin="anonymous"
></script>
<script
    nomodule
    src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll"
    crossorigin="anonymous"
></script>