Back to Blog
![]() ![]() If sites as successful as the social media giants use infinite scroll, logically you might think that it’s a user-friendly design pattern to use in all web and mobile sites. Did you ever reach a point where Facebook said to you, “you’ve reached the bottom of your feed, bye now”? No, because they use infinite scroll. Most people use infinite scroll on the daily in their social media browsing - think Facebook, Instagram or Twitter. Instead they’are presented with a perpetual content stream without having to click or spend cognitive load on paginated navigation. Also called endless scroll, the point is that the user never reaches the end of the page. Infinite scrolling is a design pattern where content is continually loaded into the interface as the user scrolls downwards. To answer it, we’ve rounded up the pros and cons to infinite scroll, plus four user-friendly alternatives that can improve conversion and engagement. So, to infinite scroll or not to infinite scroll, that is the big UX question. With some out there claiming that infinite scroll is a sure-fire way to “ break UX”, and others seeing it as the key to boosting user engagement and reducing interaction costs, it can be hard to know if infinite scroll is right for your user interface. Users either love the design pattern, or they hate it. To infinite scroll or not? We take a look at 4 alternatives to infinite scroll that boost user engagement and website conversions querySelector ( href ).4 UX friendly alternatives to infinite scroll addEventListener ( " click ", clickHandler ) Ĭonst href = this. Again here, all we have to do is set the value of the behavior property to smooth.Ĭonst links = document. This property is the JavaScript representation of the scroll-behavior CSS property and can receive the auto (default), smooth and instant (see upcoming section 7) values. Inside this method, we’ll determine the scrolling behavior via the behavior configuration property. ![]() The logic for this approach is similar to the previous jQuery implementation. Using the scroll() Methodįirst, we’ll use the scroll() method. Happily enough, it’s much simpler than you might expect. 5. Smooth Scrolling With Vanilla JavaScriptĪt this point, we’ll throw away jQuery and concentrate on two pure JavaScript solutions. Go with it only if your project already uses or needs jQuery. On the contrary, it's a reliable solution that will work well on different screens/devices, and you can customize the scrolling speed. The major downside of this method is that you have to load an extra JavaScript library. In our case, the animation will last 800ms. Note that the animate() method allows us to adjust the animation speed.
0 Comments
Read More
Leave a Reply. |