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.
scrollSnap is configured in course.json. The attributes are properly formatted as JSON in example.json.
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
trueandfalse.
_useNavigationOffset (boolean): Determines whether to use the navigation height to offset the content and scroll positions. Acceptable values are
trueandfalse. Set tofalseto 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
trueandfalse.
label (string): The label for the scroll button.
-
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.