scroll-hint

ScrollHint

Suggests that the elements are scrollable horizontally, with the pointer icon.

Installation

via npm

npm install scroll-hint --save

via yarn

yarn add scroll-hint

via cdn

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.js"></script>

Usage

import the js with babel and Browserify/Webpack

import ScrollHint from 'scroll-hint';
new ScrollHint('.js-scrollable');

Option

Name	Default	Description
suggestClass	is-active	Classname to be added when the element is scrolled-in
scrollableClass	is-scrollable	Classname to be added when the element is scrollable
scrollableRightClass	is-right-scrollable	Classname to be added when the element is right-scrollable
scrollableLeftClass	is-left-scrollable	Classname to be added when the element is left-scrollable
scrollHintClass	scroll-hint	Classname to be added to the element
scrollHintShadowWrapClass	scroll-hint-shadow-wrap	Class name added to the wrapper element for shadow effects
scrollHintIconClass	scroll-hint-icon	Classname to be added to the icon
scrollHintIconAppendClass	scroll-hint-icon-white	Another classname to be added to the element's icon
scrollHintIconWrapClass	scroll-hint-icon-wrap	Classname to be added to the icon's wrapper
scrollHintText	scroll-hint-text	Classname to be added to the text
remainingTime	-1	When to hide scroll-hint icon (ms)
scrollHintBorderWidth	10	Shadowbox border width of the element
enableOverflowScrolling	true	When using iOS and the value is true, -webkit-overflow-scrolling property will be added to the element
suggestiveShadow	false	Show suggestive shadow, when the element is scrollable
applyToParents	false	Apply JavaScript to the parent element
offset	0	You can change criteria for scrollable.
i18n.scrollable	scrollable	You can change the scrollable text from here