滚动条监听事件详解-优快云博客

本文详细介绍了如何使用JavaScript监听滚动条的位置，包括距离页面顶端和底部的距离，并通过具体实例展示了如何根据滚动位置显示或隐藏元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript事件与功能说明大全：http://tools.jb51.net/table/javascript_event

1.滚动条监听事件

例1：监听滚动条距离页面顶端距离

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

例2：监听滚动条距离页面底部距离

 1 window.onscroll = function(){
 2         //变量t是滚动条滚动时，距离底部的距离
 3         var t =  $("body").get(0).scrollHeight - $(document).scrollTop()-$(window).height();
 4         /*console.log($(window).height(),t,$(document).scrollTop());*/
 5         var scrollup = document.getElementsByClassName('bottomLink')[0];
 6         //当滚动到距离底部123px时
 7         if(t < 93){
 8             scrollup.style.display="none";
 9         }else{
10             scrollup.style.display="block";
11         }
12     };