关于如何使用javascript监听滚动条滚动事件

Javascript监听滚动条滚动事件

01:58:52

这是我的第一篇博文~前面就稍微啰嗦一下~

 作为前端开发者在网页开发中，随时记录一些心得是一个很好的习惯，这也是我在为何来这里的原因之一~~除此之外，分享一句古诗“纸上得来终觉浅，绝知此事要躬行！”，想必道理大家都懂，还是要求我们勤动手

好吧！前面太罗嗦，现在进入正题吧

关于监听滚动条滚动事件，其实很简单，这里就举一个简单的实例吧

在网页中，通常有一个通往网页顶部的锚点，现在我们就来实现它

html

<a id="scrollup" href="#top" style="position:fixed;z-index: 999;display: none;">^</a>

css

#scrollup{
        background: #777;
        color:#eee;
        font-size: 40px;
        text-align: center;
        text-decoration: none;
        bottom:65px;
        right:20px;
        overflow: hidden;
        46px;
        height:46px;
        border:none;
        opacity:.8;
        &:active{opacity:.7;}
    }

以上就是箭头所指按钮的样式啦，接下是实现滚动条监听事件~

javascript

<script type="text/javascript">
         window.onscroll= function(){
                //变量t是滚动条滚动时，距离顶部的距离
                var t = document.documentElement.scrollTop||document.body.scrollTop;
                var scrollup = document.getElementById('scrollup');
                //当滚动到距离顶部200px时，返回顶部的锚点显示
                if(t>=200){
                    scrollup.style.display="block";
                }else{          //恢复正常
                    scrollup.style.display="none";
                }
            }
</script>

实现的方法都在注释里面啦，滚动条滚动监听事件有很多，这只是一个简单的例子~~

2017-03-24   01:58:36