scroll-hint's Introduction

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
`i18n.scrollable`	scrollable	You can change the scrollable text from here

Recommend Projects