scrollHeight、clientHeight、offsetHeight、 scrollTop

由于需要实现下拉分页加载,所以对scrollHeight、clientHeight、offsetHeight、 scrollTop做些简单总结。
一、scrollHeight、clientHeight、offsetHeight具体指的是哪些范围?
在这里插入图片描述在这里插入图片描述
scrollHeight—所有的内容(指左图中有文字的红色框框内)和内边距,这个内容包括肉眼看不见、溢出、被窗口遮挡的部分。
clientHeight—右图中视野内可见的内容和内边距,不包括x轴的滚动条高度、边框、外边距。
offsetHeight—右图中,在clientHeight的基础上, 加上边框和滚动条的高度。

二、scrollTop
滚动条滚动了多少距离(包括之前已滚动过的隐藏内容)就是scrollTop。

三、代码监听是否需要下拉加载更多

const WrapperDom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
if (WrapperDom) {
  WrapperDom.addEventListener('scroll', function () {
    console.log(this.scrollHeight, this.scrollTop, this.clientHeight)
    const isAttachBottom = this.scrollHeight - this.scrollTop <= this.clientHeight
    if (isAttachBottom) {
      //xxxxx
    }
  })
}

参考:https://www.jianshu.com/p/d267456ebc0d

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这个问题可以通过CSS和JavaScript来实现。我们可以使用CSS设置状态栏的样式,然后使用JavaScript监听页面滚动事件,动态改变状态栏的内容和位置。以下是一个示例代码: ```html <!DOCTYPE html> <html> <head> <title>滚动状态栏</title> <style> #status-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; background-color: #f5f5f5; border-top: 1px solid #e5e5e5; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #333; overflow: hidden; } </style> </head> <body> <!-- 此处省略页面内容 --> <div id="status-bar">状态栏</div> <script> var statusBar = document.getElementById("status-bar"); window.addEventListener("scroll", function() { // 获取页面滚动高度和页面高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // 计算状态栏显示的内容和位置 var text = "已滚动 " + Math.round(scrollTop / (scrollHeight - clientHeight) * 100) + "%"; var top = Math.max(clientHeight + scrollTop - statusBar.offsetHeight, clientHeight - statusBar.offsetHeight); // 设置状态栏的内容和位置 statusBar.innerText = text; statusBar.style.top = top + "px"; }); </script> </body> </html> ``` 上面的代码中,我们使用CSS设置了状态栏的样式,然后使用JavaScript监听页面滚动事件,计算并设置状态栏的内容和位置。当用户滚动页面时,状态栏会动态显示当前滚动位置的百分比。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值