Horizontal Page Scrolling using Mouse Wheel count.
Hello everyone.
My exact requirement is to scroll a page horizontally by counting the vibration of the mouse wheel as I scroll.
Take a look at the code below, which begins with HTML and then CSS and does not use Javascript.
<body> <main> <article> <section>1</section> <section>2</section> <section>3</section> <section>4</section> <section>5</section> </article> </main> </body>.
After Writing Html code, Now will see CSS.
* {
margin: 0;
scroll-behavior: smooth;
}
::-webkit-scrollbar {
display: none;
}
main {
position: fixed;
top: 0;
left: 0;
/* note vh and vw switched */
width: 100vh;
height: 100vw;
/* */
transform-origin: top left;
transform: rotate(-90deg) translateX(-100vh);
overflow-x: hidden;
overflow-y: scroll;
/* scroll-snap-type: y mandatory; */
}
article {
display: flex;
flex-direction: row;
width: fit-content;
height: fit-content;
transform-origin: top left;
transform: rotate(90deg) translateY(-100vh);
}
section {
width: 100vw;
height: 100vh;
/* scroll-snap-align: start; */
overflow-y: hidden;
display: flex;
align-items: center;
justify-content: center;
font-family: monospace;
font-size: 3rem;
/* backface visibility keeps font from looking weird */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
section:nth-of-type(odd) {
background: #111;
color: #fff;
}
section:nth-of-type(even) {
background: rgb(63, 27, 27);
color: #fff;
}
Like Example: