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

r囧r小猫 2023-06-07 10:37 36阅读 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>

[scroll]: /images/20230601/c23a78f6af0847208e12841fc84119bb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，36人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 监听滚动条是否滚动到底部

【代码】js 监听滚动条是否滚动到底部。

喜欢ヅ旅行/ 2024年04月22日 15:07/ 0 赞/ 179 阅读

相关 JS 监听滚动条事件

JS 监听滚动条事件获取滚动条位置代码监听滚动条方法效果 > 获取滚动条位置代码 / 获取滚动条位置 /

朱雀/ 2023年10月04日 18:37/ 0 赞/ 277 阅读

相关纯JS监听滚动到底部

document.addEventListener('scroll', function() { let ele = document.documentEl

短命女/ 2023年06月21日 04:58/ 0 赞/ 111 阅读

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

效果图如图: ![scroll][] 代码入下: <!DOCTYPE html> <html lang="en"> <head>

r囧r小猫/ 2023年06月07日 10:37/ 0 赞/ 37 阅读

相关 vue的滚动监听事件

scrollGet(e) { // 滚动条高度 e.srcElement.scrollTop, e.target.scrollTop

ゝ一纸荒年。/ 2022年12月18日 10:51/ 0 赞/ 346 阅读

相关 jquery 判断div滚动条是否滚动到底部

//div的滚动条，判断滚动条是否到底部 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

清疚/ 2022年09月25日 03:23/ 0 赞/ 369 阅读

相关滚动条到底部

var totalheight = 0; function loadData() \{ totalheight = parseFloat($(window

迷南。/ 2022年08月07日 03:33/ 0 赞/ 357 阅读

相关 js判断滚动条是否到底部

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

灰太狼/ 2022年06月06日 02:24/ 0 赞/ 408 阅读

相关获取div滚动条滚动到底部的事件[转]

关于 jQuery 的 Div 标签的滚动条的概念，没有几个人能够完全、正确搞明白的。我知道很多人不同意我的观点。但是如果去百度上搜素，与 jQuery 滚动条有关

我会带着你远行/ 2022年05月17日 01:17/ 0 赞/ 987 阅读

相关 jquery 滚动条滚动到底部

[菜鸟教程-prop][-prop] [菜鸟教程animate][animate] $("chartContainer").animate({scrollTop:$

àì夳堔傛蜴生んèń/ 2022年04月22日 13:14/ 0 赞/ 366 阅读