Scrollable Indicator For Wide Elements – scroll-hint

Preview:

Description:

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
$ 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">
    <tbody>
      ...
    </tbody>
  </table>
</div>

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'
    }
});

Changelog:

11/12/2018

• fix shadow invisible bug when using ios