原生js onscroll 监听元素滚动滚动到底部的时候触发的事件

最新推荐文章于 2024-07-22 10:01:03 发布

怒放的生命1991

最新推荐文章于 2024-07-22 10:01:03 发布

阅读量5.2k

点赞数 6

分类专栏： js原生

本文链接：https://blog.csdn.net/qq_34507902/article/details/102545270

版权

js原生专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果图如图:

scroll

代码入下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div style="height:100px;border:1px solid #ddd;width:100px;overflow: scroll;" onscroll="divscrollFn(event)">
      xzvczsafsa<br>
      xzvczsafsa<br>
      xzvczsafsa<br>
      xzvczsafsa<br>
      xzvczsafsa<br>
  </div>
</body>

</html>
<script type="text/javascript">
/* 理解：

scrollTop为滚动条在Y轴上的滚动距离。
 
clientHeight为内容可视区域的高度。
 
scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。
 
从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。 */
function divscrollFn(event){
  let el=event.target;
   if(el.scrollTop+el.clientHeight>=el.scrollHeight){
      console.log('到底啦');
      
   };
}
</script>