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

浅浅的花香味﹌ 2022-10-31 00:38 972阅读 0赞

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

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

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

创建两个盒子box 与 nr

**注意：最外层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';
                }
            }

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

**第一种：**

**第二种:**

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

**原因:博主查了下大概是兼容性的问题,有兴趣的伙伴可以去查一查,博主暂时还没有彻底了解这个问题**

**下面我们一起来看下效果吧，注意这里博主没有设置nr盒子与box盒子的距离,所以当滑动距离大于200时，盒子会出现在最上面**

![图片][20210220140010859.gif_pic_center]  
**最后，欢迎批评与指正啦 ( •̀ ω •́ )✧**

[20210220140010859.gif_pic_center]: /images/20221024/74f5ae06267b40e8b6095c4b718cbe4d.png