onscroll 事件和onScrollCapture事件

最新推荐文章于 2024-04-16 15:57:43 发布

drunk喵咪

最新推荐文章于 2024-04-16 15:57:43 发布

阅读量6.6k

点赞数 1

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/jdrunk/article/details/110045746

版权

Javascript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1. onscroll 事件在元素滚动条在滚动时触发。

HTML 中:
<element onscroll="myScript">
JavaScript 中:
object.onscroll=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("scroll", myScript);

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
    border: 1px solid black;
    width: 200px;
    height: 100px;
    overflow: scroll;
}
</style>
</head>
<body>

<p>尝试滚动 div。</p>
<div onscroll="myFunction()">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</div>
<p>滚动 <span id="demo">0</span> 次。</p>
<script>
x = 0;
function myFunction() {
    document.getElementById("demo").innerHTML = x += 1;
}
</script>

</body>
</html>

在这里插入图片描述

2. onScrollCapture 监听鼠标滚动

一些属性：
网页可见区域高：document.body.clientHeight
:包括padding但不包括border、水平滚动条、margin的元素的高度
网页正文全文高：document.body.scrollHeight
网页可见区域高（包括边线的高）：document.body.offsetHeight
:包括padding、border、水平滚动条，但不包括margin的元素的高度
网页被卷去的高：document.body.scrollTop
:代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度
屏幕分辨率高：window.screen.height:包括padding但不包括border、水平滚动条、margin的元素的高度

offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素

const onScroll = (e) => {
       if (e.target.scrollTop == 0) {
      console.info('到顶');
      if (obj.current === 1) {
        message.warning('当前页为第一页')
        return
      }
     
      const param = {
        ...obj,
        current: obj.current - 1
      }
      getRegulatoryReportDetail(param)
      //滚动条向上滑动加载页面时，滚动条停在最下面
      e.target.scrollTop = e.target.scrollHeight
    }
    else if (e.target.scrollTop + e.target.clientHeight == e.target.scrollHeight) {
      console.info('到底');
      if (!load) {
        message.warning('该敏感词记录加载完成')
        return
      }
     
      const param = {
        ...obj,
        current: obj.current + 1
      }
      getRegulatoryReportDetail(param)
      //滚动条向下滑动加载页面时，滚动条停在最上面
      e.target.scrollTop = 0
    }
    }

<div style={{ height: "532px" }} onScrollCapture={onScroll}></div>

drunk喵咪

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
onscroll 事件和onScrollCapture事件

onscroll 事件在元素滚动条在滚动时触发。HTML 中:<element onscroll="myScript">JavaScript 中:object.onscroll=function(){myScript};JavaScript 中, 使用 addEventListener() 方法:object.addEventListener("scroll", myScript);<!DOCTYPE html><html><head>
复制链接

扫一扫