Take It to the Limit – An Overview of Long Scroll Websites (2022)

Long scroll, or infinite scroll, websites are exactly that: the pages are much longer than the “average” website page and therefore scroll “infinitely.” These types of sites have become popular with social media sites and sites like Pinterest that include a lot of user-generated content, as well as some news and blog sites—personal websites and portfolios are also beginning to employ long scroll techniques in order to increase user engagement and the length of time people spend on a site.

Infinite scroll has become a popular and common design pattern, nevertheless, there are some potential pitfalls UI designers should be aware of when designing a site that uses long scrolling. There are also some types of sites where it isn’t appropriate to employ a long scrolling design pattern.

One of the biggest benefits of long scroll websites is that they keep visitors on a site longer. When people don’t have to make a conscious decision to consume more content, they’re less likely to click away.

Think of this as being similar to the way Facebook, YouTube, Netflix, and similar sites autoplay videos when the one a user is viewing finishes. They know that if a visitor has to make an effort to click to a new video, they’re just as likely to click to a different site entirely. But if videos keep playing, it’s more likely they will continue watching.

When long scroll sites are properly coded, they load a new URL with each new piece of content. That equals more page views for the site, which can increase advertising revenue and the site’s overall value.

Take It to the Limit – An Overview of Long Scroll Websites (1)

As with any UX decision, it’s important to weigh the advantages and disadvantages to the people who will actually be using the site before deciding on a format. Long scroll can be a great option for certain types of sites, while in other situations all it does is frustrate users. It’s important to learn the difference between the two.

When to Use Long Scroll (and When Not to)

The key thing to remember when considering long scroll is that the content should dictate the format no matter what kind of site is being designed. Long scroll websites are great for certain types of content but can present a huge UX failure with other types.

On the whole, task and goal-oriented sites don’t benefit from infinite scroll designs (e.g., eCommerce sites and tutorial or other educational sites where users want to see definite progress). These types of sites need to give users a sense of completion and accomplishment, which is harder to achieve with long scrolling sites.

(Video) Figma Tutorial: Device Frames and Scrolling

Etsy, for example, tried an infinite scroll design in 2012 and ended up switching back to pagination. They found that while customers still purchased at roughly the same rate, user engagement went way down. Even things like the number of searches performed dropped.

Take It to the Limit – An Overview of Long Scroll Websites (2)

One option some eCommerce sites give to visitors is the “View All” option when looking at product pages. This gives the user the option to view the site in an infinite scroll format if they choose to do so while preserving the shorter results pages for users who prefer that format.

Pagination is also helpful when it’s important for people to view information in chronological order. Where a one-page scrolling website might encourage people to skim and skip ahead, pagination slows the visitor down and increases the likelihood of them consuming information in the proper order.

Where a single page scrolling website can really shine is on sites where reading additional content or articles is the natural flow. This applies to things like news sites or topical blogs. Users on these sites often want to take in large amounts of information at once, and infinite scroll makes it way easier.

Another obvious area where infinite scroll is a popular UX choice is social media sites or sites with a lot of user-generated content. Facebook, Pinterest, and Twitter all use infinite scroll. These sites want to keep users on the site for as long as possible, and infinite scroll does that well.

Psychological Costs of Long Scroll

The psychological effects of any design decision should always be considered carefully. When it comes to single page scrolling websites, there are psychological effects for, as well as against it.

The first thing to consider is that users don’t mind purposeful clicking. Clicking has been part of computing, graphical user interfaces, and the internet virtually since its inception. People are used to that particular type of interaction and aren’t going to be turned off if they have to click a few links to get to more content.

A lot of users dislike infinite scroll by default. Being faced with an extremely long page to scroll can feel a bit like drowning in a never-ending sea of information. When users are looking for specific information, scrolling is rarely the most efficient way to find it.

(Video) Awesome Full Page Scroll Effect Tutorial!

Since it won’t accurately display the page length, infinite scroll breaks the scroll bar on the side of the page. While not every user makes use of the scroll bar, in this respect, those that do may find infinite scroll frustrating.

Infinite scroll also removes the sense of completion users gain from finishing a task or reaching a goal on one page and then clicking to the next page. Losing this sense of completion can discourage users and cause them to seek other sources for the same information or task.

Another negative psychological impact long scrolling websites can have is that users tend to view content that’s further down the page as less important than the content at the top. Using headers can help with this, as it sort of “resets” the visitor’s brain about where the “top” is.

If it has been determined that a website project is suitable for a long scroll design, there are some best practices to keep in mind in order to make sure it offers an optimal user experience.

First up, ditch the footer! When content continuously loads, the footer will continuously be pushed off the bottom of the page. That means any content or information contained in the footer will remain out of sight. Worse still is when users catch a glimpse of the footer but lose sight of it before they have a chance to click on anything. Using a sticky footer is one way around this, although getting rid of the footer entirely is often a better option.

Take It to the Limit – An Overview of Long Scroll Websites (3)

Using visual cues is important, especially if it isn’t immediately obvious when the main screen loads that there’s more content on the page. Sites that have a large header image or visual content that fills the screen when the page loads, often include an arrow (sometimes animated) or similar imagery to indicate that there is more content below.

Take It to the Limit – An Overview of Long Scroll Websites (4)

Navigation should be consistently visible, either by using a sticky header or a stationary sidebar with navigation links. The exception to this is on mobile devices, where sticky headers can take up valuable screen real estate. Facebook handles this well by having the header disappear when users scroll down but then reappear when they start scrolling back up.

(Video) FREE programs that EVERY PC should have...

The Chrome web browser does something similar with their controls at the bottom of the screen; they disappear when the user is scrolling down, and reappear when they start scrolling back up. It’s a very intuitive way to create an interface that maximizes available screen real estate.

One vital UX feature that has thankfully become more common in infinite scrolling websites is changing the URL as each section is scrolled to. Some do this with internal bookmarks within the page. Other sites, particularly news sites and blogs, update the entire URL when the user scrolls. This is important, as it allows users to link to exactly the content they want to link to, regardless of changes to the page itself.

Some web designers opt to create what could be considered a “hybrid” long scrolling site, with a “load more” button that loads content directly onto the same page. Some UI designers use this repeatedly on the page, while others opt to include it only once, and after that turn the site into a more traditional long scrolling format.

Besides these long scroll website-specific design considerations, other UI and UX best practices for creating good designs still apply to sites that employ infinite scroll.

Examples of Long Scroll Done Right

Take It to the Limit – An Overview of Long Scroll Websites (5)

Take It to the Limit – An Overview of Long Scroll Websites (6)

Take It to the Limit – An Overview of Long Scroll Websites (7)

Take It to the Limit – An Overview of Long Scroll Websites (8)

Take It to the Limit – An Overview of Long Scroll Websites (9)
(Video) Office Hours: Scroll actions for your prototypes

Take It to the Limit – An Overview of Long Scroll Websites (10)

Take It to the Limit – An Overview of Long Scroll Websites (11)

Then there’s this site, from Andrew McCarthy. While the design is unique, it infinitely scrolls with the same information over and over again. Since McCarthy is a designer, it’s likely a deliberate choice in order to stand out from the crowd.

Take It to the Limit – An Overview of Long Scroll Websites (12)

And another example from Sam Rosen, who also keeps repeating the same content over and over again, although this site loops back to the top rather than re-loading all the content.

Take It to the Limit – An Overview of Long Scroll Websites (13)

Conclusion

While long scroll websites are nothing new, they’re reaching a new level of maturity. Designers are no longer employing them as just the next “big” thing and are instead paying attention to how the pattern impacts user experience.

Following best practices when creating infinite scrolling websites allows designers to create a UX that delights users rather than frustrates them. Concurrently, properly implemented long scroll websites can also help brands achieve their website goals.

• • •

(Video) Screen Capture Entire Web Pages On Your Mac

Further reading on the Toptal Design Blog:

  • Persuasive Design: Using Advanced Psychology Effectively
  • Design Psychology and the Neuroscience of Awesome UX
  • Experience Is Everything – The Ultimate UX Guide
  • The Ultimate UX Hook – Anticipatory, Persuasive, and Emotional Design in UX
  • The Tried and True Laws of UX (with Infographic)

FAQs

How do I get rid of infinite scroll on my website? ›

Disable Javascript for Certain website
  1. Click on the padlock icon next to the URL of the website.
  2. Choose Site settings from the drop-down menu.
  3. A new window will open with Chrome settings,
  4. Click on the drop-down menu next to Javascript and change permission to “Block”
  5. Go back to the webpage and refresh it.
16 May 2019

What is a long scrolling website? ›

Long scroll, or infinite scroll, websites are exactly that: the pages are much longer than the “average” website page and therefore scroll “infinitely.” These types of sites have become popular with social media sites and sites like Pinterest that include a lot of user-generated content, as well as some news and blog ...

How do I stop infinite scrolling? ›

Use a browser plugin to control infinite scrolling within your web browser. To avoid the extra memory usage, you can block all JavaScript entirely on your computer in your system settings. Be aware that disabling JavaScript may also disable the functionality of other websites.

How can I improve my website scrolling performance? ›

7 Ways to Improve Your Long Scrolling Website
  1. Optimize The Page Loading Time. The loading time of a long scrolling site should be great. ...
  2. Create Epic Content. ...
  3. Keep Visible Navigation Option. ...
  4. Change The Position of URL. ...
  5. Concentrate on Visuals and Designing. ...
  6. Use Scrolling Techniques. ...
  7. A Proper Roadmap is a Must.
10 Sept 2022

What is it called when you can't stop scrolling? ›

Infinite scroll

This scrolling can sometimes feel automatic or mindless, more a result of conditioning than a constant choice. This leads us to spend more time on social media than we intend to, sometimes more than we want to.

How do you scroll on a website? ›

Scroll one page at a time in all major browsers including Microsoft Internet Explorer and Mozilla Firefox by pressing the Spacebar key. Move back up the page by pressing Shift + Spacebar or the Home key on the keyboard.

How can I make a long website? ›

Using a website builder to create a website is quick and easy if you follow these simple steps:
  1. Choose the right website builder for you.
  2. Sign up for the subscription plan that works for you.
  3. Choose and purchase your domain name.
  4. Select your template.
  5. Customize your template.
  6. Add your content.
10 Feb 2022

How do I make my website longer? ›

Ctrl + - if you don't have a scroll wheel, hold down the Ctrl key and press the + (plus) key to make the page bigger. If you over do it, Ctrl – (Ctrl & minus) will make it smaller again.

How do I limit a scroll? ›

Limiting Scroll Area
  1. Right-click the sheet tab for the sheet on which you want to place a limit.
  2. In the resulting Context menu, choose View Code. ...
  3. If the Properties window is not visible, press F4.
  4. In the Properties Window, place the insertion point in the box to the right of the Scroll Area property.
22 Sept 2021

How does scrolling affect the brain? ›

Mindless scrolling not only wastes time, but also increases our dependency on dopamine. Dopamine is a neurotransmitter which is released in our brain whenever we feel aroused, motivated, or simply happy.

What is infinite scroll called? ›

Infinite scrolling is a technique that loads more content as you scroll. It allows you to continue scrolling indefinitely and is sometimes known as endless scrolling. Aza Raskin invented the mechanism whilst working at Humanized, a small user-interface company.

How do you handle a scrolling event? ›

The better ways to handle the scroll events
  1. First, set the scrolling flag to false . If the scroll event fires set the scrolling flag to true inside the scroll event handler.
  2. Then, execute the scroll event handler using the setInterval() every 300 milliseconds if the scroll events have been fired.

What are scrolling techniques? ›

The 4 Types of Creative Website Scrolling Patterns
  • Long Scrolling.
  • Fixed Long Scrolling.
  • Infinite Scrolling.
  • Tasteful Parallax Scrolling.

How can you improve the performance of a webpage of a lot of images? ›

How can you optimize images and speed up your site?
  1. Reduce the number of images. Remove them. Concatenate images into single files (i.e., image sprites)
  2. Load critical images first. Prioritize above-the-fold content. ...
  3. Compress and reduce image data as much as possible without compromising acceptable quality.

How do I turn off scrolling in Chrome? ›

2. Type "Remove Scrollbars" (without quotes) in the search box and press "Enter." Click the "Remove Scrollbars" option located on top of the search results.

How do I change scroll bar settings? ›

Double-click/tap on ScrollHeight. The Edit String window will open with the default value of -255. That is the standard size of the scrollbars you see on Windows. To change the Scrollbars height to your liking, enter a value between -120 (smaller) to -1500 (larger) for the size you want, and click/tap on OK.

How do I change the scroll option? ›

Open Settings. Click on Devices. Click on Touchpad. Under the "Scroll and zoom" section, use the drop-down menu to select the Down motion scrolls down option.

Can too much scrolling cause anxiety? ›

Spawning from a sense of inadequacy about one's appearance or a perceived lack of achievements, anyone scrolling their phones for extended periods and misusing social media faces an elevated risk of depression, anxiety, loneliness, self-harm, and suicide.

How do I limit social media scrolling? ›

Stop Scrolling: Here's How To Curb Your Phone Addiction
  1. Turn off notifications. For a start, you should turn off push notifications on social media apps. ...
  2. Set daily limits. ...
  3. Nightly wind down. ...
  4. Delete social media apps. ...
  5. Replace with helpful apps. ...
  6. Take time out.

Why you should stop scrolling? ›

Mindless scrolling can have negative effects l on one's mental health. The Cleveland Clinic research suggests that mindless scrolling can make depression and anxiety worse due to feeling left out of invites or parties that someone may have posted about. Social media is a positive tool that many of us should embrace.

What is a scroll down website called? ›

Parallax scrolling is a special scrolling technique used in web design where background images throughout a web page move slower than foreground images, creating an illusion of depth on a two-dimensional site.

What does it mean to scroll up? ›

to scroll up/down: to move higher or lower through text or graphics on a computer (usually to display parts that do not fit on the screen) verb.

How do you use scrolling? ›

How to scroll using a touch screen. On a touch screen device, swipe your finger up or down to scroll the screen up or down. Swiping up scrolls down and swiping down scrolls up. If the screen has a horizontal scrollbar, swiping left scrolls right, and swiping right scrolls left.

Is there a limit to how long a web page can be? ›

Google Chrome allows the maximum length of the URL to be of the size 2MB (2,097,152 characters). In Firefox the length of the URL can be unlimited but practically after 65,536 characters the location bar no longer displays the URL.

What is the world's longest website? ›

And llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.co.uk won the title of the longest website URL in the world by the Guinness Book of Records. Turns out, the website is actually part of a tourism campaign for a Welsh village.

How long should a website last? ›

The Lifespan of an Average Website

According to research, the average lifespan of a website is 2 years and 7 months. While this timeframe can give you some basic guidance, it isn't a hard and fast rule for all organizations.

How do you overcome a slow website? ›

9 Quick Ways to Improve Page Loading Speed
  1. Choose a performance-optimized hosting solution. ...
  2. Compress and optimize your images. ...
  3. Reduce your redirects. ...
  4. Cache your web pages. ...
  5. Enable browser caching. ...
  6. Use asynchronous and defer loading for your CSS and JavaScript files. ...
  7. Minify CSS, JavaScript, and HTML.
15 Oct 2020

What to do if a website takes too long to load? ›

Test your internet speed

Once you are sure that you have an internet connection, you may want to test the internet speed. If your internet speed is too slow, you may want to try loading the same page using a different provider's internet. If this solves the problem, then your connection might have a problem.

How do I turn on infinite scroll? ›

However, you can turn it on or off any time by toggling the “Infinite Scroll” option on My Site → Settings → Writing. Additionally, adding a footer widget will also disable the Infinite Scroll option.

Is scrolling through social media a hobby? ›

Social media is regularly referred to as a hobby. By definition, a hobby is something that is done during leisure time for pleasure.

Does scrolling cause stress? ›

Additionally, scrolling can be stressful. It can cause anxiety if we're constantly comparing ourselves to others. The algorithm of the digital world is such that if you seek negative news, more related news will come to your feed. The more negative news you watch or read, the more depressive you will feel.

Does scrolling affect memory? ›

A recent study published by the World Psychiatric Association found that social media's effect on our brain is language, memory and judgement decline - closely resembling the decline of cognitive health in the elderly.

Why is it called a scroll? ›

A scroll (from the Old French escroe or escroue), also known as a roll, is a roll of papyrus, parchment, or paper containing writing.

What is a scroll pattern called? ›

The Vitruvian scroll is a scroll pattern used in architectural moldings and borders in other media. It is also known as the Vitruvian wave, wave scroll, or running dog pattern. The pattern resembles waves in water or a series of parchment scrolls viewed on end.

Does infinite scroll improve performance? ›

Above all else, infinite scroll is designed to boost user engagement and keep viewers on the page for as long as possible. If visitors have no particular goal in mind, infinite scrolling will continue to roll out relevant content in a way that is efficient, digestible, and interruption-free.

What is a scrolling response? ›

Scrolling is when an individual gives multiple responses with the correct one included somewhere in the list. For example, if a student had previously learned to identify a banana and you show them a picture of an apple and ask them to identify it, they might respond “banana, apple”.

How do you track a scroll event? ›

Document: scroll event
  1. Syntax. Use the event name in methods like addEventListener() , or set an event handler property. addEventListener('scroll', (event) => {}); onscroll = (event) => { };
  2. Event type. A generic Event .
  3. Examples.
  4. See also. Element: scroll event.
8 Sept 2022

What is type of scroll event? ›

The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).

What is an example of a scroll? ›

If we had to give examples, Super Mario would be a clear example of horizontal scrolling, with the character moving from left to right. In a classic game like Commando,we would see the character moving from top to bottom, in a vertical scroll.

What are the two types of scroll? ›

How many types of Scroll Bars exists? There are two types of scroll bars: vertical and horizontal.

Which device used for scrolling? ›

A scroll wheel is a wheel used for scrolling. The term usually refers to such wheels found on computer mice (where they can also be called a mouse wheel).

What are simple actions that can be taken to improve one's website? ›

7 Ways to Improve Your Website Homepage
  • Freshen the Content Regularly. ...
  • Make Sure It Has a Call to Action. ...
  • Add Contact Information Prominently. ...
  • Add Images and/or Video. ...
  • Update Your Design to Current Standards. ...
  • Improve Page Speed. ...
  • Make it Mobile Responsive.
27 Feb 2019

What should a developer do to improve website performance? ›

Tactics to Speed Up Sites
  1. Bundle JavaScript and CSS Code. You can bundle multiple Javascript or CSS files into a single file. ...
  2. Use Inline Javascript and CSS Code. ...
  3. Inline & Defer JavaScript. ...
  4. Use Image Sprites. ...
  5. Cache Web Pages. ...
  6. Compress Images. ...
  7. Resize Images. ...
  8. Use a Content Delivery Network (CDN)
29 Sept 2020

What are the factors you majorly consider to improve the speed of the website? ›

Website Performance Factors You Should Monitor and Optimize
  • Website performance matters.
  • Uptime.
  • Time to first byte (TTFB)
  • HTTP requests.
  • Optimize images.
  • Start using CDN.
  • Conclusion.

How do I turn off infinite scrolling in Wordpress? ›

Disabling Infinite Scroll

However, you can turn it on or off any time by toggling the “Infinite Scroll” option on My Site → Settings → Writing. Additionally, adding a footer widget will also disable the Infinite Scroll option.

How do I stop horizontal scrolling in web design? ›

You can also set the overflow-x CSS property to hidden, which prevents child content from wrapping within its container but turns off sideways scrolling. Another solution is to set the width of child elements to 100%.

How do I stop page scrolling? ›

Disable Scrolling on a Webpage
  1. Method 1: By overriding the window. onscroll function.
  2. Method 2: By setting the height of the body to 100% and overflow to hidden.

What is it called when you keep scrolling? ›

Doomscrolling is a recent term that describes the obsessive urge to scroll through negative news. It's hard to stop doomscrolling even though it can lower your mood and leave you feeling helpless.

How do I turn off auto scroll in chrome? ›

In the address bar, type chrome://flags and press enter. In the Flags tab, search for the Smooth Scrolling setting. You can do this manually in the Available tab or use the search bar to find it. Once you've located it, press the drop-down menu next to the feature and select Enabled or Disabled.

What is fixed long scrolling? ›

Fixed long scrolling sites display information that might otherwise require multiple sections within one long-scrolling section. The effect feels like a “scroll within a scroll”. When deciding what to include in a fixed scroll section, make sure you only choose content that fits within a unified theme or category.

How do I fit a Web page exactly screen size without scrolling? ›

Try min-height: 100%

Save this answer.

What two types of scrolling should be avoided? ›

There are a couple of basic scrolling problems we often see, and that you should be sensitive to. The first is horizontal scrolling, which is typically unnecessary. Unless the interaction is a carousel, a timeline, or an intentionally horizontally structured feature, you should not be seeing a horizontal scrollbar.

Videos

1. Texas Cop Resigns After Pool Party Confrontation Video Goes Viral
(ABC News)
2. ⚡ Create a Sticky Scrolling Effect Using Elementor
(Elementor)
3. Fix unwanted horizontal scroll and whitespace with Overflow: hidden — Webflow tutorial
(Webflow)
4. I’ve Got a HUGE Secret Hiding Behind This Fake Office
(Mark Rober)
5. 5 Crazy Ways Social Media Is Changing Your Brain Right Now
(AsapSCIENCE)
6. Gumball | Darwin's Potato Diet | The Potato | Cartoon Network
(The Amazing World of Gumball)

Top Articles

You might also like

Latest Posts

Article information

Author: Van Hayes

Last Updated: 12/07/2022

Views: 5630

Rating: 4.6 / 5 (66 voted)

Reviews: 81% of readers found this page helpful

Author information

Name: Van Hayes

Birthday: 1994-06-07

Address: 2004 Kling Rapid, New Destiny, MT 64658-2367

Phone: +512425013758

Job: National Farming Director

Hobby: Reading, Polo, Genealogy, amateur radio, Scouting, Stand-up comedy, Cryptography

Introduction: My name is Van Hayes, I am a thankful, friendly, smiling, calm, powerful, fine, enthusiastic person who loves writing and wants to share my knowledge and understanding with you.