js全屏滚动代码

以下是一个使用JavaScript实现全屏滚动的简单示例代码：

HTML结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏滚动示例</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <section class="section">第一屏内容</section>
    <section class="section">第二屏内容</section>
    <section class="section">第三屏内容</section>
    <script src="script.js"></script>
</body>

</html>

CSS样式（styles.css）

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

.section {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
}

.section:nth - child(1) {
    background-color: lightblue;
}

.section:nth - child(2) {
    background-color: lightgreen;
}

.section:nth - child(3) {
    background-color: lightcoral;
}

JavaScript代码（script.js）

let currentSection = 0;
const sections = document.querySelectorAll('.section');
const totalSections = sections.length;

window.addEventListener('wheel', function (e) {
    if (e.deltaY > 0) {
        // 向下滚动
        currentSection++;
        if (currentSection >= totalSections) {
            currentSection = totalSections - 1;
        }
    } else {
        // 向上滚动
        currentSection--;
        if (currentSection < 0) {
            currentSection = 0;
        }
    }
    scrollToSection(currentSection);
});

function scrollToSection(index) {
    sections[index].scrollIntoView({
        behavior: 'smooth'
    });
}

基础概念

全屏滚动：这种效果旨在让页面按照预定义的区块（这里是每个section元素）进行滚动，并且每次滚动一个完整的屏幕高度或者宽度（取决于布局方向），给用户一种简洁、有节奏感的浏览体验。

优势

视觉上更加简洁明了，适合展示一些以画面或者板块为主的内容，如创意作品展示、企业宣传等。
引导用户按照设计好的流程浏览页面内容。

应用场景

企业官网的品牌展示页。
艺术作品或者摄影集的展示页面。
某些单页应用（SPA）中的特定页面布局。

如果在实现过程中遇到问题，例如滚动不流畅：

原因可能是浏览器兼容性问题，不同浏览器对scrollIntoView方法的支持程度可能有所不同。
解决方法可以添加浏览器前缀或者使用polyfill库来确保兼容性。例如对于scroll-behavior: smooth属性，一些旧版本浏览器可能不支持，可以使用JavaScript动画库（如GSAP）来实现更平滑的滚动效果。

如果遇到内容没有正确对齐全屏的情况：

原因可能是CSS中计算视口单位（vh、vw）时出现偏差，或者容器元素存在默认的边距、填充等影响布局。
解决方法是仔细检查CSS样式，确保所有相关元素的尺寸和布局计算正确，并且将不必要的默认样式（如margin和padding）设置为合适的值（通常是0）。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js全屏滚动代码

相关·内容

27.尚硅谷_JS基础_代码块

在线JavaScript加密，提交JS代码、上传Zip文件

JS代码压缩，减小体积、优化逻辑、提升效率

JavaScript教程-25-JS代码的执行顺序【动力节点】

在VS Code中使用JShaman插件混淆加密JS代码

两种Eval加密，适用于JS代码加密

JavaScript教程-25-JS代码的执行顺序2【动力节点】

89. 尚硅谷_佟刚_JavaWEB_文件上传案例_JS代码.wmv

JShaman本地部署英文版，测试加密700K的JS代码

1. 尚硅谷_佟刚_JavaScript DOM编程_在什么位置编写 JS 代码.wmv

1. 尚硅谷_佟刚_JavaScript DOM编程_在什么位置编写 JS 代码.wmv

JShaman一键JS代码混淆，并显示前后AST节点数量差异

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐