@deli/locomotive-scroll v3.1.5

Installation

npm install locomotive-scroll

Usage

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll();

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

With smooth scrolling

import LocomotiveScroll from 'locomotive-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 'locomotive-scroll';

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

scroll.scrollTo(target);

With events

import LocomotiveScroll from 'locomotive-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