ScrollHint

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.

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