[Coding] Insert text that lets you know that an element that has been made scrollable with overflow can be scrolled (disappears when scrolled)

You may create tables or blocks that can be scrolled using overflow when responsive.

However, it may be difficult to understand that you can scroll as is.

I will introduce a code that creates an area that lets people know that it can be scrolled, posts a message, and then disappears after scrolling.

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

I’m creating an outer outside of the table, displaying a fixed position text and then a scrolling area.

Please be careful to insert a prompting text block (class=”prompt”) just before the table outer (class=”table_outer”) element.

This is because the element immediately before the table is specified in js.

Also, since processing is applied to all class=”table_outer”, if there are many tables, the response will be slow, so please use it in moderation.

If the message returns to the initial position, the message will be returned, but if it is not necessary, please delete the elseif in the javascript.

Please modify the table design in various places.