用html+js+css3实现整屏滚动fullpage功能
以下是一个简单的实现整屏滚动fullpage功能的HTML、CSS和JavaScript代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fullpage Scroll Example</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.fullpage {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.section {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
</style>
</head>
<body>
<div class="fullpage">
<div class="section" style="background-color: #f0f0f0;">Section 1</div>
<div class="section" style="background-color: #e0e0e0;">Section 2</div>
<div class="section" style="background-color: #d0d0d0;">Section 3</div>
<div class="section" style="background-color: #c0c0c0;">Section 4</div>
</div>
<script>
document.body.addEventListener('wheel', (event) => {
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
const scrollHeight = document.documentElement.scrollHeight;
const innerHeight = window.innerHeight;
const isScrollingDown = event.deltaY > 0;
const isScrollTop = scrollTop === 0;
const isScrollBottom = scrollTop + innerHeight >= scrollHeight;
if ((isScrollingDown && isScrollTop) || (!isScrollingDown && isScrollBottom)) {
event.preventDefault();
}
}, { passive: false });
</script>
</body>
</html>这段代码使用了HTML定义了一个包含四个部分的全屏滚动容器，CSS用于设置布局和样式，JavaScript用于处理滚动事件，确保了在到达顶部或底部时阻止滚动事件，实现了全屏滚动的效果。
评论已关闭