大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编给大家分享一下原生js如果实现类似fullpage的单页/全屏滚动效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、小程序设计、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了吉安免费建站欢迎大家使用!
前言
单页/全屏滚动页面越来越常见了,它多用于产品介绍、招聘等内容较少的简单页面。针对这种效果也出现了不少 jQuery 插件,本文实现的效果类似于fullpage的单屏滚动,使用原生JS实现,不依赖任何js库;
css代码:
html,body {height:100%;} body {margin:0px;} div {height:100%;}
html代码:
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; }; });
以上是“原生js如果实现类似fullpage的单页/全屏滚动效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!