ScrollHint

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

Download GitHub

Quick start

Using CDN

You can easily start by using CDN.

Add the following description in the <head> tag of the web page you want to use ScrollHint.

<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.min.js"></script>

You can also bundle the library with Browserify/Webpack

npm install scroll-hint --save
import ScrollHint from 'scroll-hint'

Wrap the elements you want to apply ScrollSuggest like below

<div class="js-scrollable">
  <table>
      <thead>
        <tr>
          <th>Col1</th>
          <th>Col2</th>
          <th>Col3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Lorem ipsum dolor sit.</td>
          <td>Lorem ipsum dolor sit.</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.</td>
        </tr>
      </tbody>
    </table>
</div>

Write the following script

new ScrollHint('.js-scrollable');

Options

Some options are available when making new instances like below.

new ScrollHint('.js-scrollable', {
  scrollHintIconAppendClass: 'scroll-hint-icon-white', // white-icon will appear
  applyToParents: true,
  i18n: {
    scrollable: 'スクロールできます'
  }
});

For your reference, below is the list of the options available.

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

Demo

Col1 Col2 Col3
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Tips. Tips. Tips.

Suggestive Shadow

You can also show the shadow to suggest that the content is scrollable, with the code below.

new ScrollHint('.js-scrollable', {
  suggestiveShadow: true
});
Col1 Col2 Col3
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Tips. Tips. Tips.

Join development on