sectionize v0.2.0

Sectionize

Minimalistic ES6 library to create full page sections.

Features

• Native smooth scroll behaviour for supported browsers (polyfilled for others)
• Mousewheel, touch and keyboard interactions
• Anchor links

Installation

npm install --save sectionize

Usage

This library is written as an ES6 module and is meant to be used with a module bundler. Do not include it directly into a script tag

import Sectionize from 'sectionize';

const wrapper = document.querySelector('.sectionize');
const options = {
  /* options */
};
const sectionize = new Sectionize(wrapper, options);

Options

• infinite type: Boolean default: false Loop sections when moving before the first slide or past the last

• nav type: Boolean default: true Update location.hash on section change and react to its changes

• touch type: Boolean default: true Listen for touch events

• keyboard type: Boolean default: true Listen for keyboard events (up, down, space, tab)

const sectionize = new Sectionize(wrapper, {
  infinite: false,
  nav: true,
  touch: true,
  keyboard: true,
});

API

• prev() Go to the previous section

• next() Go to the next section

• go(index) Go to a section by its index

• navigate(hash) Go to a section by its anchor

Events

To listen to events you can simply call addEvenListener on the Sectionize instance. A CustomEvent will be dispatched containing the detail property populated according to the event type.

const sectionize = new Sectionize(wrapper);
sectionize.addEventListener('eventname', event => {
  console.log(event.detail);
})

Available events:

interaction

Emitted when user interacts with the library, but before calculating the new section to scroll to. Detail properties:

• source: Source of the interaction: wheel, touch, keyboard, hash
• direction: Direction of the interaction: prev or next
• from: The index of the active section

Calling preventDefault() on the event will prevent changing section

change.before

Emitted after calculating the new section to scroll to, but before scrolling to it. Detail properties:

• source: Source of the interaction: wheel, touch, keyboard, hash
• from: The index of the active section
• to: The index of the section to scroll to

Calling preventDefault() on the event will prevent changing section

change.after

Emitted after scrolling to the new section. Detail properties:

• source: Source of the interaction: wheel, touch, keyboard, hash
• from: The index of the past section
• to: The index of the new section