Featured

How to Create a Horizontal Scrolling Website [Advanced PRO]



Published
In this tutorial we learn how to create a horizontal scrolling website by adding custom CSS and Javascript within Elementor. We’ll start with a vertically designed website, and will walk you through step by step how to transform it into a horizontal layout, whilst keeping the vertical display for the mobile & tablet devices.

This tutorial will cover:
✔︎ Creating sections which are suitable for a horizontal scrolling design
✔︎ How to change the page layout from vertical to horizontal using CSS
✔︎ How to add custom Javascript code via the custom code feature
✔︎ And much more!

Links:
How to Add Custom CSS in Elementor [PRO] https://www.youtube.com/watch?v=xv9RjJky720
How to Use Elementor’s Custom Code Feature [PRO] https://www.youtube.com/watch?v=j6J-TvEXGLY

CSS Code:

.elementor-section-wrap{
display: inline-flex;
}

.elementor-section{
width:100vw;
}

.custom-width{
width: 100px;
}

body{
overflow-y: hidden;
overscroll-behavior-y: none;
}

@media (max-width:768px){
.elementor-section-wrap{
display: block;
}
}

Javascript Code (remember to add the opening and closing script tags):

function replaceVerticalScrollByHorizontal( event ) {
if ( event.deltaY !== 0 ) {
window.scroll(window.scrollX + event.deltaY * 2, window.scrollY );
event.preventDefault();
}
}

const mediaQuery = window.matchMedia( '(min-width: 770px)' );

if ( mediaQuery.matches ) {
window.addEventListener( 'wheel', replaceVerticalScrollByHorizontal );
}

Timestamps:
00:00 Introduction & overview
01:10 Get started
01:35 Using the canvas layout
01:55 Hide fixed header while editing
02:20 Create new section
03:30 Horizontal layouts explained
04:00 Add CSS to amend layout
04:50 Add CSS to fill viewport
05:50 Make amendments for responsive views
07:10 Add Javascript to control views per device
08:00 Fix overscroll behaviors
08:50 Comment out CSS to allow easy editing
09:45 See final results & recap

Category
Web design
Be the first to comment