Horizontal Scrolling

Bringing a New Dimension to the Web

Horizontal scrolling brings a refreshing, new dimension to web content—using fluidity, novel interactivity, and clever visual breaks to create highly-engaging web experiences.

What Is Horizontal Scrolling?

Horizontal scrolling is a web design technique that serves up content horizontally, left-to-right as readers scroll through a page—breaking with a traditional vertical top-to-bottom scrolling experience.

Originally considered a web design faux pas, it brings a refreshingly different interactive dimension to the web. When used sympathetically, horizontal scrolling can transform static digital content into more visually appealing and engaging experiences.

Rectangle, Black, Font, Screenshot, Line

Horizontal scrolling in and of itself doesn’t sound that groundbreaking—it’s a web page format, after all. Yet, play around with different content types and dynamic elements—such as scroll-triggered videos, parallax images, text animation, and data visualization—and you’ll quickly see the power of this simple visual technique.

What Can You Do with Horizontal Scrolling?

Horizontal scrolling is a great choice for anyone looking to create more visually interesting, interactive websites—engaging readers with an unusual and memorable navigational experience. While most web designers use it as a supplement to vertical web experiences, you can build fully-blown horizontal websites.

Horizontal scrolling websites

Want to subvert standard UI design methods and break away from traditional vertical websites? A well-designed horizontal scrolling website is sure to capture audience attention and pique their interest with an unconventional UI experience. It’s particularly great for communicating timeline- and process-based stories, crafting stand-out company homepages, and delivering slick, interactive presentations.

Horizontal scrolling sections

If a fully sideways website is a bit much, you can also incorporate horizontal scrolling through sections in an otherwise vertical experience. This is great for presenting categories of content—something that Netflix popularized with its sideways genre carousels. It’s also a great way to introduce visual breaks to sustain engagement in long-form content—giving users a refreshing change of pace through novel movement between sections.

Horizontal Scrolling Examples

Wondering how to use it in practice? Take a look at this hit list of innovative horizontal scrolling websites to inspire your next web project.

How to Build a Horizontal Scrolling Website

Horizontal scrolling websites studded with interactive elements look difficult to make—but they are actually deceptively simple. Let’s take a closer look at the three main approaches to building one.

Even if you don’t know CSS, HTML, or JavaScript, with the help of a no-code website builder you can knock up a custom scrollytelling website extremely quickly.

They were struck by how quickly they were able to learn how to use the tool and create what they had envisioned. Using a tool that is both intuitive and supported by an agile Vev support team, D2 has been able to bring new capabilities to any project.

Expansive and intuitive

It was as simple as that. Vev was the only tool that gave the writers and designers everything they needed to be able to translate their print publication onto the web without sacrificing a single asset. In fact, they could build on existing assets, and enhance their digital look and feel.

Vev quickly rose to the top

It can do things no other platform can

Vev allows for free-flowing creation, through and through. The platform simply does not have the limitations other tools do, like Ceros or Webflow.

Simplified process

With very few hoops to jump through, D2 found the path from idea to final product to be even shorter and even more practical for producing a weekly magazine.

Vev quickly rose to the top

It was as simple as that. Vev was the only tool that gave the writers and designers everything they needed to be able to translate their print publication onto the web without sacrificing a single asset. In fact, they could build on existing assets, and enhance their digital look and feel.

Expansive and intuitive

They were struck by how quickly they were able to learn how to use the tool and create what they had envisioned. Using a tool that is both intuitive and supported by an agile Vev support team, D2 has been able to bring new capabilities to any project.

Simplified process

With very few hoops to jump through, D2 found the path from idea to final product to be even shorter and even more practical for producing a weekly magazine.

It can do things no other platform can

Vev allows for free-flowing creation, through and through. The platform simply does not have the limitations other tools do, like Ceros or Webflow.

Creating a horizontal scroll container with CSS

If you decide to go the HTML route, you can whip together a horizontal scrolling container using the “overflow” CSS property. The good folk at Codeburst have broken down two neat ways to go about this, the simplest of which just uses the following code.

As with any type of design, it’s important to pay close attention to the overall page layout, including the margins and padding. You’ll also need to play around with spacing, gutter and viewport size to get the look of your scrolling section just right.

Creating a horizontal scrolling website without code

You don’t need to be an expert developer to make your scrolling website a reality. No-code website builders like Vev help creatives design and publish horizontal scrolling sections and websites without needing to code a thing. It’s as easy as dragging the Horizontal Scroll sections you want onto a tactile visual canvas. You can then explore a library of pre-built animations and interactive components to customize your website however you like. If you work with developers, they can jump in and tweak any of the code too.

React horizontal scroll resources

You can also build a horizontal scroll section using React code—check out this example from Stackoverflow for scrolling through a card section on hover. To save yourself the heavy lifting, you can also add your own custom code to pre-built horizontal scrolling components in React-friendly website builders. It’s exactly why we built Vev—combining the best of no-code for non-technical users, and low-code for seasoned developers.

1
2
3.scrolling-wrapper {
4  overflow-x: scroll;
5  overflow-y: hidden;
6  white-space: nowrap;
7
8  .card {
9    display: inline-block;
10  }
11}
12
13
14

Group content by topic

Showcasing important content in a horizontal manner reduces scrolling effort so users reach relevant information quickly. It allows you to segment your content based on a specific topic or idea of interest.

Follow best practices

As a creative design choice, horizontal scrolling can be used in any web project—but to make it work to your advantage, you need to implement it strategically and respect a few UI best practices.

How to Use Horizontal Scrolling to the Best Effect

Give readers navigational cues

As an unconventional interaction, many users may not know how to properly navigate through horizontal content. To make the users experience more pleasant and natural, horizontal scrolling options should be visually apparent.

Create the illusion of a shorter page

This lets your readers browse your content without needing to continuously scroll to find what they’re looking for. It also saves vertical page space, giving you more leeway above the fold to get creative with your web page designs.

Watch Our Horizontal Scrolling Masterclass


Get an in-depth look at how to build your very own horizontal scrolling website without writing any code. In this masterclass you’ll get a walkthrough of basic techniques, how to add custom animations and shapes, and how to build multiple sections that create the scrolling effect.

Shapes, Yellow, 3D

Feel free to explore and create as many projects as you'd like for free! Then select the plan that's right for you when you're ready to publish.


Let's make the web a more beautiful place, together.

Ready to make something exceptional?

Agencies

Ready to Make a Horizontal Scrolling Website?

Drag and drop Vev's pre-coded "Horizontal Scroll" section to your canvas to get started. You can create as many projects in Vev as you like for free, adding a plan when you’re ready to share your site with the world.

Rectangle, 3D, Green
Youtube icon
Linkedin icon
Instagram icon
Facebook icon
Twitter icon

This site was built in Vev © 2021 Vev. All rights reserved.

Scrollytelling

Scrollytelling

Scrollytelling

Material property, Dishware, Amber, Orange, Serveware
Azure, Sleeve, Rectangle

Vev is used daily by world-leading publishers and companies to tell engaging and interactive stories. Explore how Vev enables you to build and publish scrollytelling pieces with speed and the flexibility to unleash your imagination.

Scrollytelling

Scrollytelling

Scrollytelling

Scrollytelling

Scrollytelling

Scrollytelling

Scrollytelling

Scrollytelling

Scrollytelling

Scrollytelling

Rectangle
Rectangle
Material property, Furniture, Dishware, Table, Orange, Chair, Rectangle, Serveware
Rectangle, 3D, Green
Youtube icon
Linkedin icon
Instagram icon
Facebook icon
Twitter icon

This site was built in Vev © 2021 Vev. All rights reserved.