本文主要和大家介绍原生javascript实现的全屏滚动功能,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下，希望能帮助到大家，
原理：
1. 计算当前浏览器屏幕高度，每次翻页显示的内容高度即为屏幕高度
2. 对鼠标滚轮事件进行监听，注意滚轮事件的浏览器兼容问题。
废话不多说，直接上代码
立即学习“Java免费学习笔记（深入）”；
html代码：
登录后复制
css代码：
#wrap{overflow: hidden;width: 100%;}#main{top: 0;position: relative;}.content{width: 100%;margin: 0;height: 100%;}.num1{background: #e8e8e8;}.num2{background: pink;}.num3{background: yellow;}.num4{background: orange;}
登录后复制
js代码：
var wrap = document.getElementById("wrap"); var pHeight = window.innerHeight; wrap.style.height = pHeight + "px"; var content = $(".content");//懒得写获取类的原生js代码了，直接用了jquery，=。= content.height(pHeight); var startTime = 0, //开始翻屏时间 endTime = 0, now = 0; if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){ //for firefox; document.addEventListener("DOMMouseScroll",scrollFun,false); } else if (document.addEventListener) { document.addEventListener("mousewheel",scrollFun,false); } else if (document.attachEvent) { document.attachEvent("onmousewheel",scrollFun); } else{ document.onmousewheel = scrollFun; } //滚动事件处理函数 function scrollFun(event){ startTime = new Date().getTime(); var delta = event.detail || (-event.wheelDelta); if ((endTime - startTime) 0 && parseInt(main.style.top) > -pHeight * ( content.length - 1)) { //向下翻页 now += pHeight ; turnPage(now); } if (delta < 0 && parseInt(main.style.top) < 0) { //向上翻页 now -= pHeight ; turnPage(now); } endTime = new Date().getTime(); } else{ event.preventDefault(); } } //翻页函数 function turnPage(now){ $("#main").animate({top:(-now+'px')},1000); //懒得写动画代码了，直接用了jquery，=。= }
登录后复制
相关推荐：
jQuery插件fullPage.js实现全屏滚动效果
基于jquery实现全屏滚动效果_javascript技巧
jquery实现全屏滚动_jquery
以上就是javascript实现全屏滚动功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2787307.html
