js 实现全屏滚动
实现全屏滚动的 JavaScript 方法
全屏滚动效果可以通过监听鼠标滚轮事件或键盘事件，结合 CSS 和 JavaScript 实现。以下是两种常见的实现方式：
使用原生 JavaScript 实现
通过监听 wheel 事件，判断滚动方向并切换页面：
let currentSection = 0;
const sections = document.querySelectorAll('.fullscreen-section');
window.addEventListener('wheel', (e) => {
if (e.deltaY > 0 && currentSection < sections.length - 1) {
currentSection++;
} else if (e.deltaY < 0 && currentSection > 0) {
currentSection--;
}
sections[currentSection].scrollIntoView({
behavior: 'smooth'
});
});对应的 HTML 结构：
<div class="fullscreen-section">Section 1</div>
<div class="fullscreen-section">Section 2</div>
<div class="fullscreen-section">Section 3</div>CSS 样式：
.fullscreen-section {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}使用第三方库（如 fullPage.js）
fullPage.js 是一个流行的全屏滚动库，可以快速实现效果：
安装：
npm install fullpage.js使用：
import fullpage from 'fullpage.js';
new fullpage('#fullpage', {
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE'],
navigation: true,
scrollingSpeed: 1000
});HTML 结构：
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
</div>注意事项
- 移动端适配需要额外处理触摸事件。
- 考虑禁用默认滚动行为以避免冲突。
- 性能优化：节流滚动事件，避免快速滚动时多次触发。
兼容性处理
对于旧浏览器，可以添加 polyfill 或回退方案：
// 平滑滚动 polyfill
if (!('scrollBehavior' in document.documentElement.style)) {
import('smoothscroll-polyfill').then(module => module.polyfill());
}
