原生 js 实现全屏滚动效果

最新推荐文章于 2024-08-08 07:54:12 发布

karenYin0828

最新推荐文章于 2024-08-08 07:54:12 发布

阅读量9.2k

点赞数

分类专栏： javaScript学习文章标签：全屏滚动无插件原生javascript 上下滚动兼容浏览器

本文链接：https://blog.csdn.net/yinkaihui/article/details/51169916

版权

本文介绍如何利用原生JavaScript实现全屏滚动效果，通过计算屏幕高度并监听鼠标滚轮事件来实现平滑的上下滚动，同时考虑了浏览器兼容性问题。

摘要由CSDN通过智能技术生成

原理： 1. 计算当前浏览器屏幕高度，每次翻页显示的内容高度即为屏幕高度

2. 对鼠标滚轮事件进行监听，注意滚轮事件的浏览器兼容问题。

废话不多说，直接上代码

html代码：

<span style="font-size:18px;"><span style="font-size:14px;"><div id="wrap">
    <div id="main" style="top: 0;">
        <div class="content num1">
            <img src="https://www.bing.com/az/hprichbg/rb/SingingRingingTree_ZH-CN12497946624_1920x1080.jpg" width="100%" height="100%">
        </div>
        <div class="content num2">
            <img src="https://www.bing.com/az/hprichbg/rb/ShenandoahNP_ZH-CN9981989975_1920x1080.jpg" width="100%" height="100%">
        </div>
        <div class=&