Maybe we should give up on the whole idea of a 'back' button. 'Show me that thing I was looking at a moment ago' might just be too complicated an idea for the modern web.

Although some find infinite scroll to be a contentious topic at Artsy we've found it to be a useful element in many portions of our site such as filtering. However, we've run into a common and painful usability issue with infinite scroll. That is clicking on an item redirects to the next page, losing your scroll position, and losing your place when going back. To solve this we have come up with a clever little solution using an iframe.

We're pleased to announce we've open sourced this solution into scrollFrame.

scrollFrame borrows from sites like Pinterest that avoid this problem by opening the next page in a modal window. Only instead of having to build your entire page client-side, scrollFrame will intercept your click and open the next page in an iframe that sits on top of your current page and covers your viewport (acting as a sort of modal that doesn't look like a modal). scrollFrame will then hook into the HTML5 history API to remove the iframe modal on back button and keep your URL up to date. See it in action on our browse page!

scrollFrame only solves this specific problem with infinite scroll but we've gotten a lot of mileage out of it and we hope you will too!

Categories: force, iframe, infinite, infinite scroll, modal, retain scroll position, scroll position


Comments