解决js中onscroll事件失效的办法

最新推荐文章于 2023-08-16 22:33:03 发布

Free_YaW

最新推荐文章于 2023-08-16 22:33:03 发布

阅读量3k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/m0_46251547/article/details/113881172

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

前言:
这几天在写界面时，想要使用onsrcoll事件，以便达到滑动到一定位置时出现想要的效果,
但是在实现过程中,并没有理想的出现该出现的效果,在网上查阅了很多办法，基本上都是说高度或者滚动条的问题,尝试后也并没有解决。

所以如果你也是这样的情况,不妨来看看下面这种解决方法:

开启正文:
首先来看下我们的代码:

创建两个盒子box 与 nr

    <div class="box">
        <div class="nr"></div>
    </div>

注意：最外层box高度设置成大于html的高度,这时候界面会自动出现垂直滚动条

        .box{
           width:100%;
           /* box高度要大于html的高度 */
            height:1000px; 
            background:yellow;
        }
        .nr{
            display:none;
             /*这里没有这是nr与box的距离,所以在滑动时会出现在最上面,大家可以自行设置距离 */
            width: 200px; 
            height:200px;
            background:orange;
        }

最重要的js代码来了

        var box = document.querySelector('.box');
        var nr = document.querySelector('.nr');
        window.onscroll = function(){
            var scrollTop = document.scrollTop || document.body.scrollTop;
            console.log(scrollTop);
            if(scrollTop > 200){
                nr.style.display = 'block';
            }
        }

这是不是大家常用的写法，但是这个时候却不会出现任何效果，那么这个时候该怎么办呢，目前博主仅发现有以下两种方法可以解决

第一种：

<!-- 去掉该代码 -->
<!-- <!DOCTYPE html>  -->

第二种:

            // 增加 document.documentElement.scrollTop 代码
 var scrollTop = document.scrollTop || document.body.scrollTop || document.documentElement.scrollTop;