原生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 相关文章推荐
js图片延迟技术一般的思路与示例
Mar 20 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
前端开发必知的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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
PHP文本操作类
2006/11/25 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
python网络编程实例简析
2014/09/26 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
python数组过滤实现方法
2015/07/27 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
python程序输出无内容的解决方式
2020/04/09 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
python 如何在测试中使用 Mock
2021/03/01 Python
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
临床医学系毕业生推荐信
2013/11/09 职场文书
实习生自我评价
2014/01/18 职场文书
市场营销求职信范文
2014/02/21 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
学校欢迎标语
2014/06/18 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书