loco-scroll v3.2.8

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

Element attributes

Instance methods

Instance events

Dependencies

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>