mists

Description

Sometimes browsers do not make it too obvious that an element is scrollable, or simply, users do not notice it is scrollable. Roseworx Mist is a semi-transparent layer ontop of current content which visually indicates that the element can be scrolled down or right.

When an element becomes scrollable (down or right) Roseworx will automatically add a misting effect. Roseworx will also make sure the misting fixes to the direction of the scroll and that it dissapears when there is no more scrollable content.

Usage

import rwxMists from 'roseworx/js/modules/rwxMists';

Add an rwx-mist attribute to any element.

This div has the [rwx-mist] attribute and has manual sizing limits just to demonstrate the Roseworx misting effect.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.