【コーディング】overflowでスクロールするようにした要素のスクロールできることを知らせるテキストを挿入する（スクロールすると消える）

レスポンシブ時にoverflowでスクロースできるようにしたテーブルやブロックを作成することがあるかと思います。

ただ、そのままだとスクロールできることが分かりにくい場合があります。

そこでスクロールできることを知らせるエリアを作ってメッセージを掲載し、スクロールしたら消えるコードをご紹介します。

See the Pen
scroll_table by 3rdcom (@3rdcom)
on CodePen.

テーブルの外側にアウターを作成して、その中に位置固定のテキスト、その次にスクロールするエリアを表示しています。

注意点はテーブルのアウター（class=”table_outer”）の要素直前に促すテキストブロック（class=”prompt”）を挿入してください。

jsでテーブル直前の要素を指定しているためです。

また、全てのclass=”table_outer”に処理を入れているのでテーブル数が多い場合はレスポンスが重たくなるのでほどほどに使って下さい。

最初の位置に戻った場合はメッセージが戻るようにしていますが、必要ない場合はjavascriptのelseif以下を削除してください。

テーブルのデザインは各所修正してください。