[js]ScrollHintがちゃんと動かない場合の対処

びっくりした。

経緯
組んだ（失敗）
対処法
なんで？

経緯

tableてんこ盛りのページを作ることになって、列がアレだからスマホ表示時に横スクロールするタイプにしようってことになった。自作してもいいんだけどヒントがないとユーザーに分かりづらいってことで、既存品を使うことにした。

ScrollHint

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

組んだ（失敗）

こんな感じで組み込んだ。

<head>
 <link rel="stylesheet" href="https://www.webtan.cc/wp/sample/css45/css/scroll-hint.css">
</head>
<body>
<div class="wrap">
    <div class="tablewrap">
        <table>～略～</table>
    </div>
</div>

<script src="https://www.webtan.cc/wp/sample/css45/js/scroll-hint.js"></script>
<script>
        new ScrollHint('.tablewrap', {
            applyToParents: true,
            remainingTime: 5000,
            i18n: {
                scrollable: 'スクロールできます'
            }
        });
</script>
</body>

サンプルの通り、tableを入れ子にしてガワのclassを指定。

そうしたら、指定したガワのガワ（.wrap）にScrollHintが付与された。

対処法

<div class="wrap">
    <div class="tablewrap">
        <table class="scrolltable">～略～</table>
    </div>
</div>

<script src="https://www.webtan.cc/wp/sample/css45/js/scroll-hint.js"></script>
<script>
        new ScrollHint('.scrolltable', {
            applyToParents: true,
            remainingTime: 5000,
            i18n: {
                scrollable: 'スクロールできます'
            }
        });
</script>

入れ子にした状態でtable自体を指定。そうすると望み通りの動作になった。

なんで？

サンプルをちゃんと確認せずにコピペしたのが悪い。

applyToParents: true,

これだと指定したやつの親が対象になる。

落ち着いてやりましょう。