關於如何使用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;
        width: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