当前位置: 首页 > 阅读正文

js、jq监测元素滚动onscroll方法

2021年9月14日   64 次   987字数

onscroll方法可以监听页面中一个元素滚动条滚动,并读取滚动距离

监听的元素可以是body,也可以指定一个div,触发的前提是该元素存在滚动条并且该滚动条滚动。

当使用jquery时,可以多次叠加onscroll函数,原生js多次函数会覆盖。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Dome</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script type="text/javascript"> 

window.onscroll = function() {  // js
  //为了保证兼容性,这里取两个值,哪个有值取哪一个
  //scrollTop就是触发滚轮事件时滚轮的高度
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  console.log("滚动距离" + scrollTop);
}

window.onscroll = function() {  // js
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  console.log("1滚动距离" + scrollTop);
}
$(window).scroll(function() { // jq
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  console.log("2滚动距离" + scrollTop);
})
$(window).scroll(function() {  // jq
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  console.log("3滚动距离" + scrollTop);
})
  </script> 

 </head>
 <body >
  <div style="height: 2000px;background-color: yellow;"></div>

 </body>
</html>

本篇完,还有疑问?留下评论吧

发表评论