ScrollHint
Suggests that the elements are scrollable horizontally, with the pointer icon.
Installation
via npm
npm install scroll-hint --savevia yarn
yarn add scroll-hintvia cdn
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/scroll-hint.css">
<script src="https://unpkg.com/[email protected]/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 |
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 |