「テーブル」ブロックにSWELL風のスクロールヒントを表示する方法

はじめに

テーブルが表示幅を超える場合、表1の設定を適用するとスクロール表示になります。
その際、ライブラリ「ScrollHint」を使用してスクロールのヒントを表示できます（図1参照）。
これをSWELL風のシンプルなデザインに変更します。
この記事では、この方法について説明します。

設定	大項目	項目	設定値
本文	レスポンシブテーブル	横幅の広いテーブルは横スクロールする	オン

完成イメージ

実装手順

以下のコードをstyle.cssに追加します。

/* ヒント非表示 */
.scroll-hint-icon-wrap {
  display: none;
}

.scroll-hint.is-left-scrollable, .scroll-hint.is-right-scrollable {
  background: none!important;
}

/* スクロール */
.is-scrollable:before {
  animation: leftright 1s infinite alternate ease-in-out;
  content: 'スクロールできます→';
  display: block;
  font-size: 0.8em;
  left: 0;
  margin: 0;
  position: sticky;
  text-align: right;
  top: 0;
}

@keyframes leftright {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-10px);
  }
}

さいごに

今回紹介した方法を使えば、SWELL風のシンプルなスクロールヒントを簡単に実装できます。
デザインをカスタマイズしたい場合は、CSSのcontentやanimationの値を調整して、自分好みに変更してみてください。