原生js实现单屏滚动
类似于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;
};
});
查看DEMO:http://codepen.io/jonechen/pen/kkpxka
类似的原生JS效果插件参考 :http://itakeo.com/blog/2016/01/02/fullpage/;
原生js实现单屏滚动的更多相关文章
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 原生js表单序列化----- FormData
<style type="text/css"> .progress{ height: 10px; width: 600px; border: 1px solid red ...
- 自己用js实现全屏滚动
参照fullPage.js的效果,用自己的想法实现的. 实现的效果:1.全屏滚动,滚动一下齿轮就会滚动全屏. 2.自适应缩放,无论怎么改变窗口的大小,都会保证用一个元素占满全屏. 下一步计划: 1.改 ...
- 原生JS 表单提交验证器
转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...
- fullpage.js jq全屏滚动插件
fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下 ...
- 原生js实现随着滚动条滚动,导航会自动切换的效果
最近学习前端,把前面用原生js写的一段有关tab切换效果的代码贴上,实现的效果比较简陋,请大家见谅 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 原生JS实现随着鼠标滚动到元素位置触发对应css3动画,简单易用滚动监测
预览链接:http://www.vanwee.cn/%E6%BB%9A%E5%8A%A8%E7%9B%91%E5%90%AC/ <style> body{overflow-x: hidde ...
- 用原生js做单页应用
最近在公司接到一个需求,里面有一个三级跳转.类似于选择地址的时候,选择的顺序是:省份->市->区.如果分三个页面跳转,那么体验非常不好,如果引入其他框架做成单页应用,又比较麻烦.所以可以用 ...
- swiper单屏滚动
.swiper-slide { overflow: auto; } 1. 排除某些屏,不滚动 var startScroll, touchStart, touchCurrent; var aSlide ...
随机推荐
- 2019寒假训练营第三次作业part1-网络空间安全概论第五章
第五章 网络攻防技术 5.1 网路信息收集技术--网络踩点 黑客入侵系统之前,需要了解目标系统可能存在的: 管理上的安全缺陷和漏洞 网络协议安全缺陷与漏洞 系统安全缺陷与漏洞 黑客实施入侵过程中,需要 ...
- Java Class Object
Object类 它是所有类的基类. public class Person { } //实际上是 public class Person extends Object { } Object类的方法 t ...
- servlet转发和重定向
1 转发 RequestDispatcher getRequestDispatcher(java.lang.String path) 1)地址栏不会改变 2)转发只能转发到当前web应用内的资源 3) ...
- 3dContactPointAnnotationTool开发日志(二一)
今天完成了修改按钮颜色,添加smpl模型到工具,以及可以显示物体子物体对应选项卡的功能.把之前的meshRenderer+meshFilter都改成了skinnedMeshRenderer,因为s ...
- Jmeter系列-webdriver代码范例
范例 WDS.sampleResult.sampleStart() try{ //打开博客首页 WDS.browser.get('http://xqtesting.blog.51cto.com') / ...
- 封装字符串的Format操作
相信即使再讨厌MFC的朋友也不会把厌恶牵扯到CString类上,而且CString现在也提升为ATL和MFC的共享类.用CString类,当然不能忘记它的Format方法,其用于格式化字符串.示例操作 ...
- js 复制到剪贴板 兼容还得自己想办法
clipboard.js https://github.com/zenorocha/clipboard.js/ 主要问题还是ie8, 可以使用ie 特有的方法 if (window.clipboard ...
- WPF中DataGrid的应用-绑定,增改删,分页,样式
参考以下网址: http://www.cnblogs.com/fwbnet/archive/2012/05/08/2490974.html
- 【Python】python之set
阅读目录 一.set集合介绍 二.集合的方法 1.s.add()添加元素 3.s.copy()浅拷贝 4.s.difference(b) 5.s.difference_update(b) 6.s.di ...
- matlab中prod的使用方法
B = prod(A) 将A矩阵不同维的元素的乘积返回到矩阵B. 如果A是向量,prod(A)返回A向量的乘积.如果A是矩阵,prod(A)返回A每一列元素的乘积并组成一个行向量B. B = prod ...