判断滚动条是否到底了？

最新推荐文章于 2024-03-28 09:14:40 发布
最新推荐文章于 2024-03-28 09:14:40 发布
阅读量2.2k 收藏 6
点赞数 3
分类专栏： vue 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44146522/article/details/117297847
版权

了解这三个值得意思：

(1)滚动条到顶部的位置：scrollTop

(2)当前窗口内容可视区：windowHeight

(3)滚动条内容的总高度：scrollHeight

990b61f7e66005b4cb8f46e07900063d.png

滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

但是经测试发现scrollTop + clientHeight会比scrollHeight(滚动条总高度小0.5左右)

所以我们把判断滚动条到底的条件改为scrollHeight - (scrollTop + clientHeight) < 1即可

我家媳妇儿萌哒哒
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现判断滚动条到底部
10-24
主要介绍了jQuery实现判断滚动条到底部的相关资料,需要的朋友可以参考下
易语言判断滚动条是否在底端
07-23
易语言判断滚动条是否在底端源码,判断滚动条是否在底端,滚动条是否在底端,API_GetScrollInfo,API_LocalSize_SCROLLINFO,API_LocalSize_SCROLLBARINFO,API_GetScrollBarInfo
监听滚动条和触底判断
weixin_48123820的博客
05-07 1985
在滚动条滚动的过程中，每次只要滚动条的位置发生了变化，都会触发一次监听的方法。通过@scroll事件进行监听，回调参数为事件。避免一次性拉取过多数据造成渲染时卡顿。常用于滚动条滚动时懒加载数据，或者上拉到顶触发数据刷新。避免重复触发，最好是加个防抖。
vue 判断内容是否滑动到底部
最新发布
qq_36472969的博客
03-28 1058
现在很多弹窗或者页面需要把内容滑动到底部才能进行下一步操作，可以通过.scrollHeight - scrollTop === clientHeight 方式来进行处理，也可以采用 IntersectionObserver 观察元素来进行处理。
JS如何判断滚动条是否滚到底部
热门推荐
博哥的二进制世界
12-21 1万+
JS如何判断滚动条是否滚到底部背景解决方案（以纵向滚动条为例，横向滚动条方法类似） 背景 通常我们需要判断滚动条是否滚到底部，以实现相应的功能，如“加载更多”等。 那么如何通过js来判断滚动条是否滚到底部，请看以下方法 解决方案（以纵向滚动条为例，横向滚动条方法类似） 判断滚动条到底部，需要用到DOM的三个属性值，即clientHeight、scrollTop、scrollHeight。（横向滚动条则是clientWidth，scrollLeft，scrollWidth） clientHeight为内容可视
如何知道滚动的页面滑到了底部
weixin_44038355的博客
11-16 1107
如何知道滚动的页面滑到了底部 1、滚动页面的高度 document.querySelector('.scroll-page').scrollHeight 2、浏览器可视区的高度 window.innerHeight 3、滚动的高度 document.querySelector('.scroll-page').scrollTop 当然使用减法可知是否滚动到底部 document.querySelector('.scroll-page').scrollHeight - window.innerHeight
jquery如何判断滚动条是否到底部
huowuyou的博客
12-18 1634
jquery判断滚动条是否到底部的方法：1、使用【scrollTop()】方法，jQuery检测浏览器window滚动条到达底部；2、使用【scroll_div】检测动条到达底部事件。 本教程操作环境：windows7系统、jquery3.2.1版本，该方法适用于所有品牌电脑。 jquery判断滚动条是否到底部的方法： 一、jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数： $(document).height() 获取整个页面的高度 $(window).height()
JS 判断滚动条是否滚动到底了
qq_45234177的博客
09-05 625
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
angular6 滚动条判断是否触底.md
06-06
angular6，div 滚动条判断是否触底，用于滚动加载数据。
通过 JS 判断页面是否有滚动条的实现方法
01-19
在判断滚动条的同时也需要计算滚动条的宽度，通过本篇文章一并与大家分享。 为什么要判断滚动条 判断滚动条的需求在弹窗插件中用的较多，因为弹窗大多会添加 overflow: hidden 的属性，如果页面比较长的话，添加这...
JS判断页面是否出现滚动条的方法
10-23
主要介绍了JS判断页面是否出现滚动条的方法,涉及javascript针对页面元素的读取与判定实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
vue 高德地图API根据地址获取经纬度/根据经纬度获取地址
qq_44146522的博客
04-25 1万+
1.引入 <script type="text/javascript"src="https://webapi.amap.com/maps?v=1.4.14&key=368a9891083b04868fe7ad3f69729b58"></script> 2.初始化地图 let that = this; that.map = new AMap.Map('carContainer', { resizeEnable: t...
解决vue elementUI 弹框Dialog 打开后滚条回到顶部
qq_44146522的博客
04-08 3442
<el-dialog :lock-scroll="false" :append-to-body="true" > </el-dialog > append-to-body Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true boolean — false lock-scroll 是否在 Dialog 出现时将 body 滚动锁定 boolean — true ...
element UI MessageBox inputPattern 写判断
qq_44146522的博客
04-21 3321
this.$prompt('请输入分组名称', '编辑分组', { confirmButtonText: '确定', cancelButtonText: '取消', inputValidator (value) { if (value == undefined) { return '分组名不能为空' } else if (value.length == 0) { ...
vue 兄弟组件间传值 EventBus
qq_44146522的博客
04-22 2942
大家或许都听说EventBus,或者说或多或少都了解过，他可以在任何两个组件中进行传值，不局限于父子、祖孙或是兄弟组件，也可以说他是一种发布——订阅的设计模式。 我将使用拆分为五个步骤：创建、引入、监听、递交、销毁 1、创建 // 创建一个EventBus.js文件 // 引入 import Vue from 'vue' // 创建实例 vueconst EventBus = new Vue() // 导出 export default EventBus 2、引入 有两种方法 ...
vue 加密（jsencrypt）
qq_44146522的博客
11-15 2923
第一步： cnpm install jsencrypt --dep 第二步：src/utils/rsaEncrypt.js import JSEncrypt from 'jsencrypt/bin/jsencrypt.min' // 密钥对生成 http://web.chacuo.net/netrsakeypair const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD\n'
git 代码冲突处理
qq_44146522的博客
03-01 2874
在使用git pull代码时，经常会碰到有冲突的情况，提示如下信息： 1 2 error: Your local changes to'c/environ.c'would be overwrittenbymerge. Aborting. Please, commit your changes or stash them before you can merge. 这个意思是说更新下来的内容和本地修改的内容有冲突，先提交你的改变或者先将本地...
js判断滚动条是否在顶部显示
09-09
要判断滚动条是否在顶部显示，可以使用JavaScript来实现。 一种方法是通过比较滚动条的垂直位置是否等于0来判断是否在顶部。可以使用`window.pageYOffset`来获取滚动条的垂直位置，如果它的值为0，则表示滚动条在顶部显示。 另一种方法是通过判断页面的滚动距离是否小于等于0来判断是否在顶部。可以使用`document.documentElement.scrollTop`来获取文档元素的滚动距离，如果它的值小于等于0，则表示滚动条在顶部显示。 下面是使用第一种方法的示例代码： ```javascript function isScrollAtTop() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop; return scrollTop === 0; } console.log(isScrollAtTop()); // 打印true表示滚动条在顶部显示 ``` 下面是使用第二种方法的示例代码： ```javascript function isScrollAtTop() { var scrollTop = document.documentElement.scrollTop; return scrollTop <= 0; } console.log(isScrollAtTop()); // 打印true表示滚动条在顶部显示 ``` 以上就是用JavaScript判断滚动条是否在顶部显示的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值