scroll-hint
scroll-hint copied to clipboard
appleple
A JS library to suggest that the elements are scrollable horizontally, with the pointer icon.
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/[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 |
appleple