Skip to content

A JS library to suggest that the elements are scrollable horizontally, with the pointer icon.

License

Notifications You must be signed in to change notification settings

appleple/scroll-hint

Repository files navigation

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@1.1.2/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@1.1.2/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