Web Design Anti-pattern: Scrolltraps
Scrolltraps often take the form of interactive maps, but they also masquerade as embedded documents or code snippets. This mistake manifests itself most often on responsive websites waiting to ensnare fingers and cursors alike. Stated simply, scrolltraps occur any time a large scrolling element (which scrolls parallel to the page) is placed inside a webpage. Nested scrolling views are a bad design practice which lead to a crappy user experience.
Here’s a demo in case my description is too abstract. Center your cursor or finger on this page and scroll down slowly. Did you get stuck trying to past the Google Map widget? On a desktop/laptop, you can simply move the cursor out of the way to scroll by. Mobile phone users will have to fling the page and catch it to scroll past. Nobody should not be forced to play stupid games just to view a webpage.
If you (the web dev/ designer/ writer) find yourself wanting to put something like this on your page, ask yourself if the element really needs to be scrollable. Are customers really going to jump on your website and scroll around the interactive map to see how far away your store is from their house? Probably not. Is there something desirable about embedding a 50 page PDF inside of a page that can’t be accomplished by showing a preview of the first page and linking to a dedicated reader page? I doubt it. If the scrolling element is only adding “cool factor” to the page, you shouldn’t put it there.
There are plenty of alternatives to scrolltraps. Substitute interactive maps with static ones. Or replace the map with a Google maps link on mobile layouts. If you really want people to use your map to find their way to your store, providing them a link which opens in their native maps app is far more useful than a tiny scrollable map in their browser. Embedded documents can similarly be swapped out with static replacements. If it’s a PDF, chances are that it won’t be readable anyway because the text is too small without zooming in. Not to mention that PDFs are fairly heavy in terms of load time, and embedding it means that everyone who views the page will have to download it. Just replace the PDF widget with a link. Unless the page exists specifically to showcase interactive content, interactive elements are distracting from the real content of the page.
TLDR; Don’t nest scrolling elements inside of a scrolling page. It’s annoying.