原生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单例模式详解实例
Nov 21 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
小程序实现搜索框功能
Mar 26 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 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
Home Coffee Roasting
2021/03/03 咖啡文化
一个用于网络的工具函数库
2006/10/09 PHP
php基础知识:控制结构
2006/12/13 PHP
php下过滤HTML代码的函数
2007/12/10 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
jstree的简单实例
2016/12/01 Javascript
js实现二级导航功能
2017/03/03 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
对Django中内置的User模型实例详解
2019/08/16 Python
wxpython绘制音频效果
2019/11/18 Python
python 实现多维数组(array)排序
2020/02/28 Python
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
英语演讲稿3分钟
2014/04/29 职场文书
毕业实习证明范本
2015/06/16 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
导游词书写之黄山
2019/08/06 职场文书
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript