原生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 图片轮播(5张图片)
Dec 30 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
理解Javascript图片预加载
Feb 23 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
JavaScript switch语句使用方法简介
Dec 30 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中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
基于header的一些常用指令详解
2013/06/06 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
js单例模式的两种方案
2013/10/22 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
javascript轮播图算法
2016/10/21 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
python实现zabbix发送短信脚本
2018/09/17 Python
厂办主管岗位职责范本
2014/02/28 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
员工福利申请报告
2015/05/15 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
《学会看病》教学反思
2016/02/17 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
sass 常用备忘案例详解
2021/09/15 HTML / CSS