这篇文章主要介绍了原生javascript实现的全屏滚动功能,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了原生javascript实现的全屏滚动功能。分享给大家供大家参考,具体如下:
原理:
1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度
2. 对鼠标滚轮事件进行监听,注意滚轮事件的浏览器兼容问题。
废话不多说,直接上代码
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代码:
以上是JavaScript原生实现全屏滚动的功能示例的详细内容。更多信息请关注PHP中文网其他相关文章!