As a user scrolls down the page using either a mouse wheel, trackpad or touch screen, they can become trapped by an inline scroll. Whilst trapped, they are still scrolling, but the page that they were scrolling before now becomes stationary. This situation can be likened to using a Treadmill, where you are moving, but your movement does not have any result in your position within the broader environment. In these situations, it is highly probable that the user's intention was not to scroll this subset of the page.

In order to exit the 'Treadmill', the user must either move their cursor or finger outside of the area the inline scroll occupies, or wait until they reach the bottom of that content, with scroll focus then returning to the main page. To "step off of" the Treadmill, so to speak.

How Inline Scrolls Come About

Content, such as text, occupies space on a page. If you constrain that content to a size smaller than it needs, then you are left with an overflow. Much like trying to pour a pint of water into a teacup. Eventually, it will overflow. In software, you are left with two options with this overflow when constraining; cut off the content, so the overflow is not seen (not really an option) or to allow scrollbars (potentially dangerous grounds!).

HTML elements that typically cause this are either 'iframes', or 'div' with a fixed height or width attribute value. The rational behind their use being to display content from an external site or system in the first case, or to minimise the presence of the content the div encapsulates, on the page.

What is The Problem?

Cursor or finger position on the page acts as a cue to the computer as to what the user would like to scroll. As the user travels down the page, what is below their pointer changes. This means that a user can inadvertently enter a region of the screen that has its own scrollbar, and then they would be scrolling that area instead of the containing screen. In the