Create Horizontal scrolling website with css & Elementor- Avro

In this tutorial I will show how to Create Horizontal scrolling website with css & Elementor. It is very easy . All we need is some css thats all.

Tutotrial Inspiration form Red Stapler

[avro]

.elementor-inner{
width:100vh;
height:100vw;
overflow-x:hidden;
overflow-y: scroll;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
position:absolute;
scrollbar-width:none;
-ms-overflow-style:none;
}

.elementor-section-wrap{
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
display:flex;
flex-direction: row;

width: 600vw;
}

.section{ width:100vw; height:10vh}

::-webkit-scrollbar{
display:none
}

[multimind]

Hello, thanks for your tutorials. They are really pushing the boundaries of Elementor. I have one question: Is there a way to add a simple navigation for the different sections? Because the scrollbar is deactivated now, the only way to get to the sections on the right is by using the scrollwheel, which not every user might could figure out. Unfortunately anchor links which direct to other sections won't work here anymore.

[vikaschoudhary]

Great Tutorial. Thank you. Please also show how to make the website responsive on tablets and mobile, also let us know of any issues that we might face while making this.

[straktormedia]

Hi Avro. Awesome work here. But is it possible to go to specific sections by buttons?
I tried using "Page scroll to id" plugin, but it doesn't seem to recognize the layout as horizontal (although it has an option for horizontal themes).
Thanks in advance.

[bySterling]

So awesome! Curious if anyway to have the scroll ‘snap’ and frame to each section?

[ecomebusiness]

great job y're doing. I have a question for you, How please can i have the scrolling effect mouse but not for entire website. Just for one section ?

[clabs]

Doesnt work for me.. my pages are overlapping each other

[vandasar]

The backend environment from which you're are writing the code is not available on WordPress by default, is it a plugin you installed

[thunderx]

Could you tell how to create the horizontal effect only for a section?

[elenatilli]

Hello, Thank you for the tutorial. I would love to get this effect on my website.
How can I get this to work if I don't have an elementor-inner class? I only have elementor-section-wrap. Thanks

[chanebranders]

how can I only add it to a few sections on the page not all of them? Like first three sections scrolls are default and then 2 sections scrolls vertically (almost as if there's a slider) and then after those to sections scrolling normal again??

[lisaenroy]

Thank you so much! But it doesn't work with me. The content now stays on the left side and is rotated 90 degrees. So it doesn't rotate back to horizontal and the scrollbar stays in the middle. What does work is the sections they are next to eachother. Only 90 degrees rotates on the left side of the scrollbar in the middle of the screen. I ran through the script several times, but I do not see any typing errors. Do I need a specific theme?

[realMentorX]

Hello Avro, thanks for that. Is it also possible to get this for some sections on the side and not for the entire page.
Would be nice to get this done some how. So for example just for 6 consecutive sections and before and after them are normal vertical scroll sections.

THX in Advance

[therealsalamiboi]

@avro Works beautifully on the live page but I get a blank page on the Elementor builder.

[WanuX]

Is this method also working to Mobile view or Responsive ?

[cameroncraig]

is it possible to have the last section scroll back into the first section so it is a continual scroll?

[Mahmoud-Montaaser]

great, how can I show this scroll only on web view

[sogetrapdz]

please a tutorial for mix scroll vertical and horizontal with magicscroll libray (animations)

[wolfganglehner]

the horizontal website doesn't work with the mouse wheel on chrome. how can i fix that?

[rishiichaudharyy]

Is there anyway to scroll woocommerce product category like store.google.com product category after hero section on elementor or oxygen builder.