adapt-scrollSnap

An extension which hides the scrollbar and snaps the scroll position to blocks for large devices. Navigation based on swipe gestures, specific keyboard navigation, the mouse wheel, and an optional scroll button.

Content is set to fill the viewport height.

Please see this blog post for an example of how this has been used.

Settings Overview

scrollSnap is configured in course.json. The attributes are properly formatted as JSON in example.json.

Attributes

The following attributes are set within course.json:

_scrollSnap (object): The scrollSnap object that contains the configuration settings.

_isEnabled (boolean): Turns the extension on/off. Acceptable values are true and false.

_isEnabledFromSize (string): Defines the minimum screen size the extension is enabled from. Acceptable values are "xlarge", "large", "medium" or "small". Defaults to large.

_useNavigationOffset (boolean): Determines whether to use the navigation height to offset the content and scroll positions. Acceptable values are true and false. Set to false to fill the entire viewport height.

_scrollDuration (number): The duration of the scroll transition.

_button (object): The configuration setting for the scroll button.

_isEnabled (boolean): Turns the scroll button on/off. Acceptable values are true and false.

label (string): The label for the scroll button.

Limitations

• Content is not set to explicitly fill the browser width. If required, additional styling should be added to the theme, as the look and feel will be dependant upon the Art Direction and plugins to be used.

• Not designed to work with a page-header. As the extension fills the viewport, all content should be added as components.

• Currently not setup to work with adapt-contrib-trickle. Instead, blocks are step-locked until completed. Mark blocks as _isOptional to disable step-locking.

• Currently not setup to work with adapt-contrib-pageLevelProgress. Do not use with other plugins that permit navigation (e.g. adapt-devtools map), including use of Adapt.navigateToElement.

---

Author / maintainer: CGKineo
Accessibility support: WAI AA
RTL support: Yes
Cross-platform coverage: Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, Safari for macOS/iOS/iPadOS, Opera