SectionScroll.js

ScrollSection.js is a very simple plugin which enables you to scroll by sections.

Purpose

The main difference of this plugin compared to other scroll-by-section plugins is that it doesn't manipulate anything but the scroll and it supports any element height.

Features

• Any number of containers.
• Any number of child sections.
• Infinite scrolling - if there are offsets placed both on top of first container and bottom of last container, or if your browser supports scrolling above and below webpage contents.
• Mobile touch
• Key press scrolling - UP, DOWN, LEFT, RIGHT (vertical movement only)

Notes

This plugin only supports layouts which consist of only the container and child sections. Any other layouts which have elements placed above or below the containers will not be accessible to the user.

Usage

v2.1.0

SectionScroll(container, children, scroll duration)
Scroll duration is optional, default 500(ms).

Note: jQuery migration may be required, as seen in the working example.

<script type="text/javascript" src="SectionScroll-2.0.0.js"></script>
<script type="text/javascript">
  $(document).ready(() => {
    SectionScroll("article", "section", 500);
  });
</script>

v1.0.0 (DOM)

SectionScroll(container, children)

<script type="text/javascript" src="SectionScroll.js"></script>
<script type="text/javascript">
  window.load = SectionScroll("article", "section");
  window.onresize = SectionScroll("article", "section");
</script>

Examples

See working examples:
v2.1.0 - JSFiddle
v1.0.0 - JSFiddle

Current Bugs

MINOR - Touch gestures on mobile are a bit buggy

Licence