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

Folders and files

NameName
Last commit message
Last commit date
May 11, 2018
Jan 12, 2025
Apr 8, 2022
Jan 12, 2025
Jan 14, 2025
Jan 14, 2025
Jan 14, 2025
May 1, 2018
May 1, 2018
May 1, 2018
May 1, 2018
May 1, 2018
May 1, 2018
Nov 16, 2024
May 1, 2018
Feb 25, 2025
Jan 14, 2025
Jan 14, 2025
Jan 14, 2025

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@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