原生js实现类似fullpage的单页/全屏滚动


Posted in Javascript onJanuary 22, 2017

前言

单页/全屏滚动页面越来越常见了,它多用于产品介绍、招聘等内容较少的简单页面。针对这种效果也出现了不少 jQuery 插件,本文实现的效果类似于fullpage的单屏滚动,使用原生JS实现,不依赖任何js库;

css代码:

html,body {height:100%;}
body {margin:0px;}
div {height:100%;}

html代码:

<div style="background:#FEE;"></div>
<div style="background:#EFE;"></div>
<div style="background:#EEF;"></div>
<div style="background:red;"></div>

js代码:

document.addEventListener("DOMContentLoaded", function() {
 var body = document.body,
 html = document.documentElement;
 var itv, height = document.body.offsetHeight;
 var page = scrollTop() / height | 0;
 //窗口大小改变事件
 addEventListener("resize", onresize, false);
 onresize();
 //滚轮事件
 document.body.addEventListener(
 "onwheel" in document ? "wheel" : "mousewheel",
 function(e) {
  clearTimeout(itv);
  itv = setTimeout(function() {
  var delta = e.wheelDelta / 120 || -e.deltaY / 3;
  page -= delta;
  var max = (document.body.scrollHeight / height | 0) - 1;
  if (page < 0) return page = 0;
  if (page > max) return page = max;
  move();
  }, 100);
  e.preventDefault();
 }
 );
 //平滑滚动
 function move() {
 var value = height * page;
 var diff = scrollTop() - value;
 (function callee() {
  diff = diff / 1.2 | 0;
  scrollTop(value + diff);
  if (diff) itv = setTimeout(callee, 16);
 })();
 };
 //resize事件
 function onresize() {
 height = body.offsetHeight;
 move();
 };
 //获取或设置scrollTop
 function scrollTop(v) {
 if (v == null) return Math.max(body.scrollTop, html.scrollTop);
 else body.scrollTop = html.scrollTop = v;
 };
});

在线演示请点击:这里

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
js解决movebox移动问题
Mar 29 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 #Javascript
Vue.js学习之过滤器详解
Jan 22 #Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 #Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 #Javascript
Vue.js学习之计算属性
Jan 22 #Javascript
ionic中列表项增加和删除的实现方法
Jan 22 #Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 #Javascript
You might like
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
php模板引擎技术简单实现
2016/03/15 PHP
php中static和const关键字用法分析
2016/12/07 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
python批量修改文件名的实现代码
2014/09/01 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
公司请假条范文
2014/04/11 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js