开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

有帮助

没帮助

相关·内容

fullPage.js全屏滚动插件

如果你要制作一个全屏的网页，使用这个插件在合适不过，如QQ浏览器官方网站直接下载使用方法 1.引入fullpage.css文件 2.引入jq 和 fullpage.js文件 js"> js/jquery.fullPage.min.js"> 3.初始化...div> 第三屏的第四屏第四屏 //js.../jquery.easing.1.3'> --> js/jquery.fullPage.min.js"> <script type="text

15K2 0

js实现全屏代码

document.addEventListener("keydown", function(e) { if (e.keyCode == 13) { ...

8.2K2 0

原生JS实现全屏视频背景滚动淡出

给大家分享一个用原生JS实现全屏视频背景滚动淡出，效果如下 : 以下是代码实现，欢迎大家复制粘贴和收藏。原生JS...实现全屏视频背景滚动淡出 * { margin: 0; padding: 0;

5.2K3 0

JS 实现全屏和退出全屏

Fullscreen API 是一组用于控制全屏显示的方法和属性，它们允许我们将网页内容以全屏的方式展示给用户，并提供了相应的事件来监听全屏模式的变化。...在本文中，我们将介绍如何判断浏览器是否支持全屏功能，如何实现进入全屏和退出全屏的功能，以及如何获取当前全屏元素和监听全屏模式的变化。...实现全屏要实现全屏，我们可以使用 requestFullscreen() 方法。该方法可用于 DOM 元素，使其进入全屏模式。...退出全屏当我们需要退出全屏时，可以使用 exitFullscreen() 方法。该方法可用于当前处于全屏状态的元素。...获取全屏元素在全屏模式下，我们可能需要获取当前处于全屏状态的元素。可以使用document.fullscreenElement属性来获取。

3.9K2 1

js页面全屏退出全屏

事件操作注：下表中 de代表 document.documentElement 操作浏览器代码全屏 W3C de.requestFullscreen 全屏 CHROME de.webkitRequestFullScreen...全屏 FIREFOX de.mozRequestFullScreen 全屏 IE de.msRequestFullscreen 还原 W3C document.exitFullscreen 还原...document.webkitCancelFullScreen 还原 FIREFOX document.mozCancelFullScreen 还原 IE document.msExitFullscreen 代码...// html 一个按钮 // js data() { return { fullscreen...; // 判断是否已经是全屏 // 如果是全屏，退出 if (this.fullscreen) { if (document.exitFullscreen

10.8K3 0

JS控制全屏，监听退出全屏事件

实现方案 //进入全屏 function requestFullScreen(de) { if(de.requestFullscreen){ //W3C de.requestFullscreen...videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;'; document.IsFullScreen = true; } } //退出全屏...== null) { wscript.SendKeys("{F11}"); } } } //退出全屏判断浏览器种类 function exitFull(...== null) { wscript.SendKeys("{F11}"); } } } 监听退出全屏事件 //监听退出全屏事件 window.onresize...isFull; }/* Your code... */ 本文采用「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息：原文出处：Yiiven https://www.yiiven.cn/js-full-screen-events.html

11.4K3 0

无缝循环滚动图片的JS代码

无缝循环滚动图片的JS代码，用来展示商品什么的最好了，图片URL可以自行替换，速度也可以自己调试。... 无缝滚动</

12.2K3 0

js无缝循环滚动图片示例代码

html代码 3 css代码 * { margin: 0; padding:...left; margin: 0; padding: 0; } #banner ul li img { width: 400px; height: 600px; } js...oUl.style.left = -oUl.offsetWidth/speed+'px'; } oUl.style.left = oUl.offsetLeft+speed+'px';//进行右横向滚动...//oUl.style.left = oUl.offsetLeft-2+'px';//进行左横向滚动 } //调用方法 var timer = setInterval(move,30)//速度

12.2K2 0

JS实现全屏模式

代码实现切换全屏模式 const handleClick = () =>...2 document.addEventListener('fullscreenchange', () => { // do something }) 浏览器兼容 w3c标准谷歌火狐 IE 置为全屏模式...requestFullScreen webkitRequestFullScreen mozRequestFullScreen msRequestFullScreen 退出全屏模式 exitFullscreen...webkitExitFullscreen mozCancelFullScreen msExitFullscreen 当前全屏模式的元素 fullscreenElement webkitFullscreenElement...mozFullScreenElement msFullscreenElement 全屏API 全屏API参考连接

4K3 0

JS 实现全屏效果

点击按钮触发 requestFullscreen() 函数打开全屏 requestFullscreen () { const docElm = document.documentElement...docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen() } } 点击按钮触发 exitFullScreen() 函数关闭全屏...} else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen() } } 如果需要监听全屏状态变换

17K2 0

js触发全屏事件

} } 此方法亲身实践过，有效下面这个方法未实践，不知是否有效让用户端JS触发指的就是让用JS监听用户的操作事件，通过JS程序去实现F11全屏。...if (document.webkitIsFullScreen) { 17 //全屏后要执行的代码 18 }else{ 19...//退出全屏后执行的代码 20 　　} 21 }, false); 22 23 document.addEventListener("fullscreenchange...", function() { 24 if (document.fullscreen) { 25 //全屏后执行的代码 26...42 }else{ 43 //退出全屏后要执行的代码 44 } 45 }, false) 46 } 47

16K3 0

网页两侧加入二次元美女代码，全屏滚动

网页两侧加入二次元美女代码，全屏滚动安装教程一：进入网站目录，模板文件夹，找到对应的网页头部文件 header.html（注：各个 cms 程序文件名不一致）二：添加代码到 —————– 之间，安装结束代码：<link rel=”stylesheet” href=”https://www.zige5.com/style/css/ 背景 css.css“

2941 0

iOS全屏滑动代码

// 获取系统自带滑动手势的target对象 id target = self.interactivePopGestureRecognizer.delegate; // 创建全屏滑动手势...handleNavigationTransition:)]; // 设置手势代理，拦截手势触发 pan.delegate = self; // 给导航控制器的view添加全屏滑动手势

1.4K1 0

网站背景全屏代码

背景你也可以自己到百度找我赠送你们一个背景 <style type="text/css"> .sy_list_dl ul li:nth-child(6n+1...

3.4K3 0

iOS全屏滑动代码

// 获取系统自带滑动手势的target对象 id target = self.interactivePopGestureRecognizer.delegate; // 创建全屏滑动手势...handleNavigationTransition:)]; // 设置手势代理，拦截手势触发 pan.delegate = self; // 给导航控制器的view添加全屏滑动手势

1.1K0 0

js实现全屏切换控制 WordPress

前段时间做的几个小项目都加入进去了全屏切换控制按钮，这个过程是怎么实现的呢，其实和暗黑控制切换一样。非常的简单。并且适用于所有网站，WordPress、typecho都不是问题，技术互通。...只待你补充css效果展示图片正文开始#js代码//控制全屏function enterfullscreen() { //进入全屏 $("#fullscreen").html("退出全屏");...$("#fullscreen").html("切换全屏"); if(document.exitFullscreen) { document.exitFullscreen();...#js调用示例代码源于:博客园:挑战者V博客 https://www.cnblogs.com/youcong/p/11440596.html

4.4K1 0

分享一款jQuery全屏滚动页面特性案例

分享一款jQuery全屏滚动页面特性案例。我们在来往官网，或者小米官网都会看到全屏滚动页面的一些例子。可以说全屏滚动页面越来越受欢迎。...看看实际代码： js...; overflow-y:hidden; _background-image:url(about:blank); _background-attachment:fixed; }/* html加上这段代码用于取消...,是个人业余兴趣爱好写的，是基于jquery一个特效，没有任何封装，只是提供一种思考方式和实现方法，代码共享可随便使用，可能存在bug，但本人不承担任何修复bug的责任。

4K3 0

如何使背景照片覆盖全屏不会随屏幕滚动

html 中 css 中使背景照片覆盖全屏 body,html{ background: url(..

1.5K3 0

网页全屏插件 screenfull.js

全屏测试按钮 jQuery(function() { jQuery('#btn_full_scr').click(function() { if (!...screenfull.enabled) { alert('你的浏览器不支持全屏'); } screenfull.request();...used like this too: //screenfull.request(document.getElementById('container')); }); }); 代码如下...： js"> 全屏测试按钮<...screenfull.enabled) { alert('你的浏览器不支持全屏'); } screenfull.request(); // does not require jQuery, can

8.8K2 0

JS 对指定iframe 全屏操作

最近在搞页面全屏踩到一个坑。。...具体代码实现如下 function fullScreen(iframeId) { /* 获取父类的document */ var parentDoc = parent.document;...iframeId){ thisIframe = e; } }); requestFullScreen(thisIframe); } /** * 调用全屏方法

8.3K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭