开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

整屏滚动原生js

整屏滚动（Full Page Scroll）是一种网页设计效果，它允许用户通过滚动鼠标滚轮或者键盘方向键来滚动整个页面，而不是传统的逐屏滚动。这种效果通常用于展示网站的内容，尤其是那些以视觉效果为主或者内容较少的网站，比如作品集、宣传页等。

基础概念

整屏滚动效果通常是通过监听滚动事件，然后根据滚动的方向和距离来决定页面的滚动位置。这个过程中可能会涉及到CSS的平滑滚动效果（scroll-behavior: smooth;）和JavaScript来控制滚动的位置。

相关优势

用户体验：提供独特的浏览体验，使用户能够快速浏览网站的主要内容。
视觉效果：增强网站的视觉吸引力，适合展示图片或视频较多的网站。
简洁性：减少导航元素，使网站看起来更加简洁和现代。

类型

基于滚轮事件的滚动：监听鼠标滚轮事件来控制页面滚动。
基于键盘事件的滚动：监听键盘方向键来控制页面滚动。
基于触摸事件的滚动：在触摸设备上，通过触摸滑动来控制页面滚动。

应用场景

作品集网站：艺术家或设计师展示作品的网站。
宣传页：企业或产品的宣传页面。
活动页面：用于活动宣传或票务的页面。

实现方法

以下是一个简单的原生JavaScript实现整屏滚动的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Page Scroll</title>
<style>
  html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  section {
    height: 100vh;
    width: 100%;
  }
</style>
</head>
<body>

<section style="background-color: red;">Section 1</section>
<section style="background-color: green;">Section 2</section>
<section style="background-color: blue;">Section 3</section>

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

  function scrollToSection(index) {
    window.scrollTo({
      top: sections[index].offsetTop,
      behavior: 'smooth'
    });
    currentSection = index;
  }

  window.addEventListener('wheel', (event) => {
    if (event.deltaY > 0) {
      // Scroll down
      scrollToSection((currentSection + 1) % totalSections);
    } else {
      // Scroll up
      scrollToSection((currentSection - 1 + totalSections) % totalSections);
    }
  });
</script>

</body>
</html>

遇到的问题及解决方法

滚动不流畅：可能是由于JavaScript执行效率不高或者CSS渲染问题，可以尝试优化代码或者使用requestAnimationFrame来提高滚动动画的流畅度。
兼容性问题：不同浏览器对于滚动事件的支持可能有所不同，需要进行兼容性测试，并对不同浏览器进行适配。
移动设备不响应：需要添加对触摸事件的支持，如touchstart、touchmove和touchend事件，并相应地调整滚动逻辑。

整屏滚动效果可以通过原生JavaScript实现，但是在实际开发中，也可能会使用现成的插件或库来简化开发过程，例如fullPage.js等。

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

有帮助

没帮助

相关·内容

jquery 滚轮插件示例 - 整屏滚动

正屏滚动的需求 ? ? ? ? ? 编写通过滚轮上下切换这五个屏幕效果。要做出这个效果，其实不用说，首先要把这五个div的基本HTML+CSS给写出来先。准备好五个图片 ? 001.png ?...type="text/css" href="css/root.css"> js..."> js"></script...len}); $('.pages_warper_inner .page').css({'height':$height}); // 用于函数节流：降低滚动触发修改...siblings().removeClass('active'); $nowIndex = $(this).index(); // 滚动向上向下的动画效果

4.6K2 0

js 原生无缝滚动

innerHTML=demo1.innerHTML//克隆demo1为demo2 function Marquee(){ if(demo2.offsetHeight-demo.scrollTop滚动至...=setInterval(Marquee,speed)//设置定时器 demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的...//克隆demo1为demo2 function Marquee(){ console.log(‘调用’) if(demo2.offsetHeight-demo.scrollTop滚动至...=setInterval(Marquee,speed)//设置定时器 demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的

37.7K3 0

原生JS实现目录滚动特效

分享一个用原生JS实现的文字滚动效果，这种效果通常用在网页中一些局部展示信息，如新闻、动态、充值记录等，效果如下： ? 实现代码如下：原生...JS实现目录滚动特效 body { font-size: 12px; line-height: 24px...con2 = document.getElementById('con2'); //设定定时器执行时间间隔 var speed = 50; //设定向上滚动变量...function scrollUp() { //当滚动列表向滚动的高度大于等于列表自身的高度时 if (area.scrollTop >

33.1K2 0

原生JS滚动鼠标改变元素大小

今天要分享的是运用原生JS滚动鼠标改变元素大小，效果如下：以下是代码实现，欢迎大家复制粘贴。原原生...JS滚动鼠标改变元素大小 #div1 { width: 200px; height: 200px;...window.onload = function () { var oDiv = document.getElementById('div1'); // 滚动事件...var oEvent = ev || event; var bDown = true; // 用于区分是向上滚动还是向下滚动

9.2K2 0

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

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

5.2K3 0

移动端滚动加载-----jQuery 和原生JS

判断滚动条到底部，需要用到DOM的三个属性值，使用jQuery分别是： $('body').scrollTop()为滚动条在Y轴上的滚动距离。...从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为('body').scrollTop() +(window).height() == 1.绑定滚动监听事件 $(window).bind('scroll...',isScrollBottom); 2.判断滚动条已滚动到底部 $('body').height() - $('body').scrollTop() - $(window).height() <...bind('scroll',isScrollBottom);},2000); } } $(window).bind('scroll',isScrollBottom); 原生...JS：scrollTop、clientHeight、scrollHeight scrollTop为滚动条在Y轴上的滚动距离。

22.3K1 0

手机滚动截屏软件推荐

读者提问：手机滚动截屏软件有推荐的吗？...阿常回答： 1、第三方软件：滚动截屏（iPhone） 2、iOS 13 自带的长截图功能（iPhone） 3、微信自带的图片合成功能（我 → 收藏 → 右上角+号，在笔记页面里可以导入多张截屏图片，再将这个笔记导出为图片就是一张长图了...4、大多数安卓手机自带的长截图功能（Android） 5、第三方软件：滚动截屏长截图（Android） 6、第三方软件：截图大师（Android）阿常碎碎念：阿常平时会使用方法 1 更多一些，大家可以根据自己所用机型来选取合适的截屏方法

1.9K2 0

实现Web端自定义截屏(原生JS版)

经过一番考虑后，我决定用原生js来重构这个插件，让其不依赖任何库，这样它就能运行在任意一台支持js的设备上，本文就跟大家分享下我重构这个插件的过程，欢迎各位感兴趣的开发者阅读本文。...运行结果视频：写在前面本文不讲解插件的具体实现思路，对插件实现思路感兴趣的开发者请移步：实现Web端自定义截屏搭建开发环境我想使用ts、scss、eslint、prettier来提升插件的可维护性...body中，在vue3版本的截图插件中，我们可以使用vue组件来辅助我们，这里我们就要基于组件来使用js来创建对应的dom，为其绑定对应的事件。...在上一篇文章的评论区中有位开发者 @名字什么的都不重要建议我使用webrtc来替代html2canvas，于是我就看了下webrtc的相关文档，最终实现了截屏功能，它截取出来的东西更精确、性能更好，不存在卡顿问题也不存在...tracks.forEach(track => track.stop()); this.videoController.srcObject = null; } }; // 截屏

3K3 1

JS简易整页滚动

fullPage超简易版本 1.知识点 JS 滚动监听事件 JS 移动端touch监听事件函数节流 DOM操作 2.示例GIF ?...CSS html, body设置 overflow 为 hidden, 让视图中只包括一个分页;设置滑动分页的长宽都是 100%; 外部容器设置 transition 过渡效果, 并设置为相对定位, 滚动是修改外部容器的...Top 值, 实现滚动效果. html, body { padding: 0; margin: 0; overflow: hidden; } .page-container { position...向下滚动时, 当 currentPosition 比 -整体分页高度大的时候(绝对值相比小的时候), 向下滚动;向上滚动时, 当 currentPosition 大于 0 的时候, 向上滚动. /...滚动事件firefox与其他浏览器的事件不同, 所以需要进行判断. deltaY大于0的时候, 想下滚动; 反之, 向上滚动. var handlerWheel = throttle(scrollMove

15.7K3 1

JS判断滚动条是否停止滚动

背景：昨天一个同事有种需求，有一个展示数据区域的div，带滚动条，当滚动条滚动时，需要向后台发请求，计算数据，再拿到前台展示。 ...分析：由于数据量级别较大，所以当滚动条滚动时，如果时时向后台发请求，对服务器和浏览器都造成巨大的压力。想到的解决方案是，当滚动条停止时，再去发请求计算数据。...那么问题来了，如何判断滚动条是否停止了呢？解决：搜索了一下，js本身是无法判断滚动条是在滚动状态还是停止状态，只有通过其它方式了。...后来想到的思路是当滚动条滚动的时候，发起一个定期执行的方法，并记录一次当前滚动条到顶部的距离，这个方法中判断此时滚动条到顶部的距离是否和上次记录的相等，如果相等，那么说明停止滚动了，不相等，还在滚动。...-- // 让浏览器出现滚动条 for(var i = 0; i < 100; i++) { document.write(""); } var topValue = 0,//

17.4K0 0

JS 阻止页面滚动

在升级到 ios11.3 系统后，阻止页面滚动的代码 e.preventDefault 代码失效了。...表示事件采用冒泡机制（capture 译为捕获），浏览器默认就是 false passive:false 表示我现在主动告诉浏览器该监听器将使用 e.preventDefault() 来阻止浏览器默认的滚动行为...所以 Safari 中默认使用了 passive:true，告诉浏览器，此监听事件中，不会阻止默认的页面滚动。...所以 Safari 默认是不会阻止滚动的。通过 e.preventDefault(); 阻止默认的下拉滑动的效果，通过添加 passive:false 参数来兼容各个浏览器。...即可实现阻止移动页面滚动的功能。

23.1K5 0

js截屏以及three.js场景截屏

来来来，说正事在手机端截屏完全不需要前端动什么脑子，但是在网页上截屏就很头疼了，我这里介绍两种情形，针对普遍和某一特殊功能需求 1、js截屏插件html2canvas.js 这个插件真的很好用，而且GitHub... js: html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild...(canvas) }); 2、js原生代码截屏如果你只是要截取canvas里面的内容，那就很简单了。...因为canvas原生的有toDataURL方法，可直接将选中的canvas转变为base64编码。因为我是用在three.js这个3d项目的场景里面，所以没用过这个库的朋友可能没遇到过bug。...那就是截屏出来的图片是空白的，场景scene后期渲染的比如灯光，加载的模型都没有截图截下来。

8.6K2 0

原生JS实现拖拽进度条、滚动鼠标显示相应的内容

今天要分享的是运用原生JS实现拖拽进度条、滚动鼠标显示相应的内容，实现效果如下： ? 以下是代码实现，欢迎大家复制粘贴。原生...JS实现拖拽进度条、滚动鼠标显示相应的内容 #parent { width: 400px; height...(); } //针对IE和Chrome下阻止默认,防止滚动时DIV和页面滚动一起发生变化 return...目前主要针对的是javascript培训，同时还提供了css教程、javascript 视频、js特效等，最新推出了外地学员们喜欢的javascript网络课程服

4.9K2 0

js四舍五入、向上取整、向下取整

Math.round()、Math.ceil()、Math.floor()分别代表取整，向上取整，向下取整。 Math.round四舍五入参数：一个数值。...Math.round(20.5);//返回结果为21 //特殊负数情况 x = Math.round(-20.5);//返回-20 x = Math.round(-20.51);//返回-21 向上取整Math.ceil...注：Math.ceil(null)返回0，而不是返回NaN错误，QAQ，js坑真多。由于ceil是Math的静态方法，因此访问Math对象就可以直接调用了。...Math.ceil(.95);//1 x = Math.ceil(4);//4 x = Math.ceil(7.00008);//8 x = Math.ceil(-7.00008);//-7 向下取整Math.floor...Math.floor用于向下取整，Math.round用于四舍五入，对于这三种方法都需要特别注意为负数的情况，可能跟我们预想的不一样。

6K2 1

js书写原生ajax,JS 原生ajax写法

原生ajax 原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe...… JS原生ajax与Jquery插件ajax深入学习序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来...jquery插件ajax方法,于是就行了一些总结,因 … js原生Ajax的封装与使用一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR...原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 2 [代码]JS原生Ajax&comma...;GET和POST javascript/js的ajax的GET请求: Jquery学习笔记(10)–ajax删除用户，使用了js原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦

15.3K4 0

原生 canvas 如何实现大屏?

前言可视化大屏该如何做？有可能一天完成吗？废话不多说，直接看效果，线上 Demo 地址 lxfu1.github.io/large-scree…。...如何用 canvas 绘制各种图表，如何实现 canvas 动画如何自动化部署自己的大屏网站实现项目基于 Create React App --template typescript搭建，包管理工具使用的...缺点：兼容性，基于 proxy 开发，对低版本浏览器不友好，当然，大屏应该也不会考虑 IE 这类浏览器。

1662 0

JS实现图片循环滚动

之前在前端的时候有遇到这样一个问题，实现 JS 图片的循环滚动，然后鼠标移入的时候停止滚动，鼠标移开继续滚动，这里无非就是设置了一个定时器，鼠标移上时清除定时器达到滚动停止的目的，鼠标移开时重设定时器，...DOCTYPE> JS实现图片循环滚动 #roll {...setInterval(Marquee, speed) demo.onmouseover = function() { clearInterval(MyMar)//鼠标移上时清除定时器达到滚动停止的目的

19.8K3 0

js滚动到页面顶部

本文俺将教大家如何使用原生js的scrollTo来实现滚动到页面顶部。如果不需要使用动画来滚动，则不需要使用到任何插件。...我们可以使用原生的JavaScript window.scrollTo 传入0,0 将会立即滚动到页面左上角。...element.scrollTo(x-coord, y-coord); //或者 element.scrollTo(options) 参数 x-coord 是期望滚动到位置水平轴上距元素左上角的像素。...y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。或者 options 是一个ScrollToOptions对象。

14.3K4 0

js实现文字竖向滚动

/js/vue.js"> js/jquery-1.11.1.min.js"> (function (doc, win) { // 移动端适配 var...白衣扶2112弦领取247.11元现金 js

23.4K1 0

js滚动到页面顶部

原生js的scrollTo来实现滚动到页面顶部。...setting the body scroll top to anchor top $('html, body').animate({scrollTop:target_top}, 500); }); js...平滑滚动到顶部,底部,指定地方采用锚点进行页面中的跳转的确很方便，但是要想增加网页的效果，可以使用jquery中的animate，实现滚动的一个动作，慢慢的滚动到你想跳转到的位置滚动到顶部： $(...我们可以使用原生的JavaScript window.scrollTo 传入0,0 将会立即滚动到页面左上角。...y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。或者 options 是一个ScrollToOptions对象。

13.3K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭