css，使每个部分全屏.通过滚动相互移动

Question

我有五个部分:

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

问题是我想让鼠标滚动在它们之间移动成为可能。如:

scroll up =>到上面去向下滚动=>转到下方

它就像带有滚动行为的按钮效果，但是没有按钮。

我想让它们每个都是当前屏幕的全屏(我有屏幕1920/1080其他有1024/768等)。

我有这样的CSS代码:

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

Answer 1

您必须使用Javascript。使用滚动事件监听器

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

我个人会这样使用它。注意，根据您的需要，这可能不起作用。

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()
}
});

我的CSS看起来像

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