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

スポンサーリンク
CSS
スポンサーリンク

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

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

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

 

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

 

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

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

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

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

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

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

コメント

タイトルとURLをコピーしました