Question Horizontal and Vertical Scrolling - This is the mother of all problems

[madnmadder]

I'm trying to make a vertical scrolling and horizontal scrolling one page web site....

5 pages of vertical scrolling
15 page across ( 3 pages scrolling horizontally before we go to the next vertical page)
some page will have more than 3 horizontal scrolling pages and some will have less than 3 horizontal scroll pages.

just to explain it again a bit more clearly i hope

So you would scroll down on page one, that would translate to 3 horizontal page scrolls, after the 3rd page or number of specified pages (the number of horizontal page scrolls should be able to be adjusted depending on the vertical page I'm on ''variable'')
the website would then scroll down one vertical page.
and repeat the horizontal to vertical scrolling effect.

I also would like to know how i could implement a menu or at the very least a anchor point menu into this just for user ease.

Any ideas: Css / jarva: coding wise / plugin wise

FYI - I'm not good at coding and will miss a lot of that kind of talk
but any and all responses are welcome

whatsapp +27 62 255 1433 - Michael - if you would like to try out your idea on the site | or if you have any cool ideas

idea thanks

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Ps. not my idea but found that this helped one part of my problem but i still cant use vertical scrolling with this.

I've managed to get the whole site to scroll Horizontally by using this CSS code below
(after you set each page to ''Fit to screen'' and set the ''Css Class'' on every ''Edit Section'' to ''Section''

Then adjust the -- width: 600vw; -- 100 points higher for the amount of pages you have.


Css code - edit section - custom css - paste the below


.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
}

 

[MjgJhb]

as always - no support feedback again....