CODEWITHSUNDEEP
javascripthtmlcss
Nyctophilius
Nyctophilius

Reputation: 57

css, make each section a full screen.. moving to each other by scrolling

So I have five sections:

<section id="one">Page 1</section>
<section id="two">Page 2</section>
<section id="three">Page 3</section>
<section id="four">Page 4</section>
<section id="five">Page 5</section>

The thing is I wanna make it possible to move between them with mouse scrolls.. such as:

scroll up => go to the upper section scroll down => go to the lower section

It's just like the button effect with scroll behavior but without buttons.

And I want to make each of them full screen of the current screen (I have screen 1920/1080 other has 1024/768 ETC).

I have CSS code like this:

html, body {
    margin: 0;
    height:100%;
    width:100%;
    padding:0;
}

section {
    display: block;
    background: #CFF;
    height:100%;
    width:100%;
    padding: 60px;
    padding-left: 120px;
    box-sizing: border-box;
}

Upvotes: 0

Views: 2004

Answers (1)

Ghibran Aljabbar
Ghibran Aljabbar

Reputation: 87

You'd have to use Javascript for this. Use the scroll event listener

document.addEventListener('scroll', (e) => {
 yPos = window.scrollY;
 //do your logic here
 }
});

i would personally use it like this. note this might not work depending on your needs.

let pages = []
pages.push(document.querySelector('#pageOne'))
// do it for all your  pages
document.addEventListener('scroll', (e) => {
 yPos = window.scrollY;
 if (yPos> 500) return;
 const pageNum = Math.floor(yPos/100)
 pages[pageNum].focus()
 }
});

and my css would look something like

secton{
// all your styles
display:none;
width: 100vw;
height : 100vh;
}

section:focus{
display : block
}

Upvotes: 1

Related Questions