scroll-hintをWordPressの任意のブロックに適用する

横幅が大きなテーブルなどを、スマホ表示ときに画面からはみ出して横スクロールさせるjsライブラリとしてscroll-hintが有名です。

CocoonなどのWordpressテーマでも使われています。

この記事では、scroll-hintの導入方法と、Wordpressのブロックエディタで、好きなブロックにscroll-hintを適用する方法をお伝えします。

この記事で分かること

scroll-hintの使い方
scroll-hintをブロックエディタで使う時
1. グループ化してclassを追加する
2. 追加CSSにCSSを追加する
まとめ

scroll-hintの使い方

使い方は公式サイトに書かれている通りで、以下の手順でおこないます。

ScrollHint

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

①：CDNからCSSとjavascriptを読み込む

CSSはヘッドで読み込みます。

<?php
add_action('wp_head',function(){
?>
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css">
<?php
});

②：ScrollHintを実行する

フッターでjsを読み込むようにします。

<?php
add_action('footer',function(){
?>
<script src="https://unpkg.com/scroll-hint@1.1.10/js/scroll-hint.js"></script>
<script>
new ScrollHint('.js-scrollable');
</script>
<?php
});

③：スクロールさせたい要素を<div class=”js-scrollable”>で囲む

スクロールさせたい要素をdivで囲んで、classを追加します。

<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>

scroll-hintをブロックエディタで使う時

ブロックエディタのテーブルに適用したい時に、高度な設定で追加 CSS クラスに”js-scrollable”を追加してもうまく動きません。

Scroll hintを正常に動かすには、スクロールさせたい要素にラッパーを付け、ラッパーに”js-scrollable”が必要です。

今回、テーブルに直接”js-scrollable”を付けてしまっているため、正常に動きません。

グループ化してclassを追加する

ブロックをグループ化すると、ブロックがdivで囲われるようになります。

グループ化したグループの『高度な設定』の追加 CSS クラスに”js-scrollable”を追加すると、期待した動きになります。

追加CSSにCSSを追加する

scroll-hintが動くためには、画面から要素がはみ出す必要がありますので、要素の最小幅をCSSで指定する必要があります。

追加するCSSは次のようにします。

グループ化すると、divの直下にブロックが来ますので、直下の要素に対してmin-widthで最小幅を指定します。

ブロックの種類に依存せずに適用可能になります。

iconの位置なども微調整が必要かもしれません。

.js-scrollable >*{
	min-width:580px;
}
.scroll-hint-icon {
	position: absolute;
	top: calc(50% - 25px);
	left: calc(50vw - 60px);
	box-sizing: border-box;
	width: 120px;
	height: 100px;
}