scroll-hint.js for Mobile! How to Easily Implement a Horizontally Scrollable Table

This article introduces how to use scroll-hint.js to enable horizontal scrolling when viewing tables on smartphones and tablets.
In particular, it provides detailed examples of CSS, HTML, and JavaScript code to improve user experience without compromising design.

1. What is scroll-hint.js?

scroll-hint.js is a lightweight library provided by Appleple that adds a visual hint to horizontally scrollable elements, indicating to users that they can scroll.
It is easy to use with simple settings and is especially suitable for displaying tables and image galleries.

2. CSS Code to Enable Horizontal Scrolling

Follow the steps below to introduce scroll-hint.js.

1. Download scroll-hint.js and scroll-hint.css, or obtain them via CDN.
2. Load the scroll-hint.css file.

To style the table (.table, .table td, .table th), use the following CSS. Customize as needed.

<link rel="stylesheet" href="scroll-hint.css">
<style>
body {
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 18px;
  line-height: 1.6em;
  padding-top: 20px;
}
p{
  font-size: 16px;
  padding: 20px 0;
}
.table {
  width: 900px;
  margin-bottom: 1rem;
  border-collapse: collapse;
  background-color: transparent;
  margin: 0 auto;
}
.table td,.table th {
  border:1px solid #ccc;
  padding: 20px;
}
</style>

3. HTML Code to Define the Table Structure

Use the following HTML structure to make the table (table class="table") horizontally scrollable.
Set class="js-scrollable" to the parent element.

<h1>Using scroll-hint.js to indicate horizontal scrolling for tables (table) on smartphones and tablets.<br></h1>
<p>View this page on a smartphone or tablet, or use Chrome's Developer Tools to simulate a smartphone view.<br>Even if the browser width is less than 900px, the "You can scroll" message will appear.</p>

<div class="js-scrollable">
  <table class="table">
    <tbody>
      <tr>
        <th>Number</th>
        <th>Name</th>
        <th>Date of Birth</th>
        <th>Address (Prefecture)</th>
      </tr>
      <tr>
        <td>A001</td>
        <td>Ichiro Tokyo</td>
        <td>November 22, 1981</td>
        <td>Tokyo</td>
      </tr>
      <tr>
        <td>A002</td>
        <td>Jiro Tokyo</td>
        <td>December 23, 1982</td>
        <td>Tokyo</td>
      </tr>
      <tr>
        <td>A003</td>
        <td>Saburo Tokyo</td>
        <td>January 4, 1983</td>
        <td>Tokyo</td>
      </tr>
      <tr>
        <td>A004</td>
        <td>Shiro Tokyo</td>
        <td>February 5, 1984</td>
        <td>Tokyo</td>
      </tr>
      <tr>
        <td>A005</td>
        <td>Goro Tokyo</td>
        <td>March 6, 1985</td>
        <td>Tokyo</td>
      </tr>
      <tr>
        <td>A006</td>
        <td>Rokuro Tokyo</td>
        <td>April 7, 1986</td>
        <td>Tokyo</td>
      </tr>
    </tbody>
  </table>
</div>

4. JavaScript Code to Use scroll-hint.js

Use scroll-hint.js to add visual hints to horizontally scrollable areas.
Load the scroll-hint.js file and write new ScrollHint('horizontal-scroll-area', {options}).
In the options, you can set the horizontal scroll message and colors. Use the following code:

  <script src="scroll-hint.js"></script>
  <script>
  new ScrollHint('.js-scrollable', {
    scrollHintIconAppendClass: 'scroll-hint-icon-white',
    applyToParents: true,
    i18n: {
      scrollable: 'You can scroll'
    }
  });
  </script>

6. Demo Page: Indicating Horizontal Scroll for Tables on Smartphones and Tablets Using scroll-hint.js

You can check the actual demo page from the link below.

Demo page showing horizontal scroll for tables on smartphones and tablets using scroll-hint.js

Source: ScrollHint

ScrollHint

Conclusion

scroll-hint.js is extremely useful for displaying horizontally scrollable tables on smartphones and tablets.
By using the combination of CSS, HTML, and JavaScript introduced in this article, you can easily implement it.
Give it a try to enhance user experience.

　
*If you reuse this, please do so at your own risk.
Do not reuse the Google Analytics tag in the demo page’s head tag.