Websites and applications tend to make you think of "scrolling" in one direction first: downward. Virtually all web pages structure their content vertically, so it makes sense. By using your mouse, trackpad, or keyboard, scroll down past the fold to see more. Animated fly-in elements or parallax effects might be used on some websites to enhance the user experience. However, scrolls usually remain vertical.
Vertical scrolling isn't a bad thing; however, what about its X-axis counterpart, horizontal scrolling? Do you know what it is, it's advantages and where it can be used? I'll answer these questions in this article and then show you how to create basic horizontal scrolling using CSS and HTML, if it seems suitable for your site.
What Is Horizontal Scrolling:
Scrolling horizontally reveals content from the sides of a window or container as the user scrolls left and right. You can scroll horizontally by clicking and dragging a horizontal scroll bar, swiping sideways with the mouse or trackpad, pressing left or right arrow keys, or using a touchscreen to swipe sideways with your finger.
When Scrolling horizontally can be great for user experience
The horizontal scrolling in these scenarios creates a good user experience
For Featuring many products or items in different categories so that they can be easily viewed
Information that is difficult to examine at a glance
For using multiple images in a website
Presenting information on applications in discrete sections or slides
Information that is difficult to examine at a glance
Positives of horizontal scroll:
Across all devices, this design is nearly 100 percent consistent.
It's designed to allow secondary information to be included without taking up too much space on the page. Horizontal scrolling, for instance, allows users to quickly scroll through a photo gallery so they can see a small sample of what's available and expand their viewing opportunities.
There is a lot of vertical space saved using horizontal scrolling. Horizontal layouts present users with smaller amounts of information instead of presenting all of the content at once on a long page. Horizontal layouts provide greater flexibility. It is possible to add content both horizontally and vertically.
Users can view different categories by swiping to the side or scrolling down. Hola allows users to get a full view of the options within a category by swiping to the side.
Users are benefitted by this use of two dimensions as it shows a variety of choices without forcing them to browse different categories.
How to Create Horizontal Scrolling With HTML and CSS
Step 1: Add HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>
Making a div horizontally
scrollable using CSS
</title>
</head>
<body>
<center>
<h1>Hashnode</h1>
<h2>
Making a div horizontally
scrollable using CSS
<div class="scroll">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#support">Support</a>
<a href="#blog">Blog</a>
<a href="#tools">Tools</a>
<a href="#base">Base</a>
<a href="#custom">Custom</a>
<a href="#more">More</a>
</div>
</center>
</body>
</html>
Step 2: Use CSS to apply scroll behavior.
h1 {
color: blue;
}
div.scroll {
margin: 4px, 4px;
padding: 4px;
background-color: #08c708;
width: 300px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
Most of us scroll vertically out of reflex - it just makes more sense than scrolling horizontally. Nonetheless, horizontal scrolling still has a place in modern design. Whenever this method is used sparingly and intentionally, your pages will be structured and your content will be presented effectively.
Output:
You can now extend your support by buying me a Coffee.😊👇
If you want to contact me you can do it here:
Thanks for Reading 😊