Scrollable Indicator For Wide Elements – scroll-hint

Category: Javascript , Recommended | May 15, 2018
Author: appleple
Views Total: 44
Official Page: Go to website
Last Update: May 15, 2018
License: MIT


Scrollable Indicator For Wide Elements – scroll-hint


scroll-hint is a lightweight and simple-to-use JavaScript library that displays a point icon to indicate the current element is horizontally scrollable.

Also has the ability to add custom CSS classes to the scrollable element depending on the current status.

Useful for displaying wide HTML table on the mobile device that there is not enough space to display all the columns.

How to use it:

Install the scroll-hint library.

# Yarn
$ yarn add scroll-hint

$ npm install scroll-hint --save

Use the scroll-hint as a module.

import ScrollHint from 'scroll-hint';

Or directly include the scroll-hint’s JavaScript and CSS files on the page.

<link rel="stylesheet" href="scroll-hint.css">
<script src="scroll-hint.js"></script>

Insert your wide HTML table into a DIV container.

<div class="js-scrollable">
  <table class="table">

Initialize the scroll-hint library and done.

new ScrollHint('.js-scrollable');

The default CSS classes added to the scrollable table.

new ScrollHint('.js-scrollable',{
    suggestClass: 'is-active',
    scrollableClass: 'is-scrollable',
    scrollableRightClass: 'is-right-scrollable',
    scrollableLeftClass: 'is-left-scrollable',
    scrollHintClass: 'scroll-hint',
    scrollHintIconClass: 'scroll-hint-icon',
    scrollHintIconAppendClass: '', // 'scroll-hint-icon-white'
    scrollHintIconWrapClass: 'scroll-hint-icon-wrap',
    scrollHintText: 'scroll-hint-text',

Specify the duration of the scroll-hint icon.

new ScrollHint('.js-scrollable',{
    remainingTime: 2000 // default: -1

Add a shadow effect to the boundary of the element if scrollable.

new ScrollHint('.js-scrollable',{
    suggestiveShadow: true // default: false

More configuration options.

new ScrollHint('.js-scrollable',{
    scrollHintBorderWidth: 10,
    enableOverflowScrolling: true,
    applyToParents: false,
    i18n: {
      scrollable: 'scrollable'

Leave a Reply