Horizontal Page Scroll Using Vanilla Javascript

source

Scrolling is an essential aspect of web navigation, but what if we switch things up? Instead of traditional vertical scrolling, we can create an engaging horizontal scrolling effect using just Vanilla JavaScript! 🚀

In this Horizontal Page Scroll Using Vanilla JavaScript tutorial, we’ll explore how to achieve smooth horizontal page scrolling with pure JavaScript and CSS, creating a seamless, visually appealing layout.

Why Use Horizontal Scrolling?

✔ Unique & Interactive – Offers a fresh browsing experience.
✔ Great for Portfolios & Showcases – Perfect for image galleries, slideshows, or storytelling websites.
✔ Lightweight Solution – No external libraries needed, just HTML, CSS, and JavaScript.

HTML Structure of Horizontal Page Scroll using Vanilla Javascript

The HTML structure consists of a .container element, which holds multiple <section> elements. Each section represents a full-screen slide with a unique background color.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Horizontal Page Scrolling || TechyTechs</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<section style="--clr:#dad4ff;">
			<div class="content">
				<h2>Section One</h2>
			</div>
		</section>
		<section style="--clr:#fffd92;">
			<div class="content">
				<h2>Section Two</h2>
			</div>
		</section>
		<section style="--clr:#ffe2eb;">
			<div class="content">
				<h2>Section Three</h2>
			</div>
		</section>
		<section style="--clr:#cfffca;">
			<div class="content">
				<h2>Section Four</h2>
			</div>
		</section>
		<section style="--clr:#dafff6;">
			<div class="content">
				<h2>Section Five</h2>
			</div>
		</section>
	</div>
	<script>
		window.addEventListener('scroll', function() {
			const scrollY = window.scrollY;
			const totalHeight = document.body.scrollHeight - window.innerHeight;
			const percentageScrolled = (scrollY / totalHeight) * 100;
			const translateX = (percentageScrolled/5) * -4;
			document.querySelector('.container').style.transform = `translateX(${translateX}%)`;
		});
	</script>
</body>
</html>

Breaking Down the HTML:

✔ The .container holds multiple <section> elements, each with a different background color.
✔ Each section displays a heading (h2) for visual clarity.
✔ The <script> adds the horizontal scrolling effect by translating .container along the X-axis.

CSS of Horizontal Page Scroll using Vanilla Javascript

The CSS ensures a smooth scrolling effect while keeping sections properly aligned in a horizontal layout.

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,700,900&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

body {
	min-height: 200vh;
	background: #f2f2f2;
}

.container {
	position: fixed;
	display: flex;
	width: 500%;
	height: 100vh;
	transition: transform 0.5s ease-out;
}

section {
	position: relative;
	width: 100vw;
	height: 100vh;
	background: var(--clr);
	display: flex;
	justify-content: center;
	align-items: center;
	border: 5px solid #333;
}

.content {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.content h2 {
	font-size: 4em;
	color: #333;
}

Breaking Down the CSS:

✔ .container is fixed to ensure smooth translation along the X-axis.
✔ Each section fills the full screen width and height with a different background color.
✔ A smooth transition (ease-out) makes the scroll movement fluid and natural.

JavaScript: Making the Scroll Work

The JavaScript listens for scroll events and dynamically translates the .container horizontally based on the scroll progress.

window.addEventListener('scroll', function() {
	const scrollY = window.scrollY;
	const totalHeight = document.body.scrollHeight - window.innerHeight;
	const percentageScrolled = (scrollY / totalHeight) * 100;
	const translateX = (percentageScrolled/5) * -4;
	document.querySelector('.container').style.transform = `translateX(${translateX}%)`;
});

How the JavaScript Works:

Detects vertical scrolling (scrollY).
Calculates the percentage scrolled relative to the total page height.
Converts vertical scroll into horizontal movement (translateX) for .container.
Applies the transformation to create a smooth horizontal scrolling effect.

Final Result: Smooth Horizontal Scrolling

🎯 As the user scrolls vertically, the page moves horizontally through different sections! This provides a unique, eye-catching experience that works beautifully for portfolios, landing pages, or interactive storytelling websites.

Can I use this on mobile devices?

Yes! Since it uses CSS and JavaScript, it works on most modern devices. However, adjustments may be needed for touch gestures.

Can I add more sections?

Absolutely! Simply add more <section> elements inside .container, and the layout will automatically adapt.

Can I change the transition speed?

Yes! Modify the transition property in .container { transition: transform 0.5s ease-out; } to adjust the speed.

Will this work in all browsers?

This works in all modern browsers that support CSS transforms and JavaScript event listeners.

How do I customize the colors?

You can modify the --clr values in each <section> to set your preferred background colors

Conclusion

By using Vanilla JavaScript, we achieved a smooth horizontal scrolling effect without relying on external libraries. This method is lightweight, responsive, and easy to customize! 🚀

💡 Try it out and add your own creative touch!

Horizontal Page Scroll using Vanilla Javascript

Table of Contents