纯JS监听滚动到底部

最新推荐文章于 2023-11-21 10:28:00 发布
最新推荐文章于 2023-11-21 10:28:00 发布
阅读量350 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanqi3131/article/details/103490949
版权 
document.addEventListener('scroll', function() {
 let ele = document.documentElement; // 获得html
    let scrollTop = ele.scrollTop; // 向上滚动的高度
    let scrollHeight = ele.scrollHeight; // 滚动内容区域总高度
    let clientHeight = ele.clientHeight; // 可见高度
    if (clientHeight + scrollTop >= scrollHeight) { // 已经滚动到底部
    }
})
不许动一二三
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js监听scrolltop_JS监听页面滚动到底部事件
weixin_29568143的博客
01-13 692
Eclipse安装Spring-tool-suite目录结构: // contents structure [-] 在Eclipse上安装Spring-tool-suite的方法有那些 如何查看自己的Eclipse版本 如何知道自己的Eclipse对应 ...rc.local 增加自启动编辑 /etc/rc.d/rc.local,将要执行的命令放里面. 然后给 rc.loca...
判断滚动条到底部的JS代码
12-12
判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。 scrollTop为滚动条在Y轴上的滚动距离。 clientHeight为内容可视区域的高度。 scrollHeight为内容可视区域的高度加上溢出...
js监听页面的scroll事件，当移到底部时触发事件
weixin_34150224的博客
07-02 553
//页面拉到底时自动加载更多 $(window).scroll(function(event){ var wScrollY = window.scrollY; // 当前滚动条位置 var wInnerH = window.innerHeight; // 设备窗口的高度（不会变） var bScrollH = document.body.scrollHeight; ...
原生js 监听页面滚动到了底部
rb0518的博客
12-27 1490
废话不多说，直接上代码 //监听页面的滚动 window.onscroll = function() { //scrollTop是滚动条滚动时，距离顶部的距离 //为了保证兼容性，这里取两个值，哪个有值取哪一个 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //windowHeight是可视区的高度 let windowHeight = document.documentEl.
js监听滚动条滑动到底部
Nep_tune的博客
11-09 7369
$(document).ready(function(){ var range = 0; //距下边界长度/单位px var elemt = 0; //插入元素高度/单位px var maxnum = 2000; //设置加载最多次数 var totalheight
【js】监听滚动事件：是否滚动到底部
heni6560的博客
04-23 1198
// 监听滚动事件 jQuery(function () { jQuery("#r-list").scroll(function () { //是否加载完成 if (isLoad) { return false; } var divHeight = $(this).height(); ...
vue 纯js监听滚动条到底部的实例讲解
12-11
1、怎样用纯js判断滚动条是否到底部？ 先了解几个关键词： （1）滚动条到顶部的位置：scrollTop （2）当前窗口内容可视区：windowHeight （3）滚动条内容的总高度：scrollHeight 触发监听的函数是： [removed] = ...
vue实现页面滚动到底部刷新
10-16
总的来说，Vue.js实现页面滚动到底部刷新的关键在于监听滚动事件，判断是否达到页面底部，然后根据需要调整请求参数并发送请求加载更多数据。这个过程需要结合服务器端的接口设计，确保数据能够正确地按需加载。
jQuery实现判断滚动条到底部
10-24
在这段代码中，`$(window).scroll()`监听滚动事件，`$(this).scrollTop()`获取滚动条的Y轴位置，`$(document).height()`获取文档的总高度，`$(this).height()`获取窗口的可视高度。当这三个值满足底部条件时，会触发...
js设置聊天信息停留在最底部
Cupid
05-14 1206
设置信息框滚动条的距离=当前信息框的最大高度（包括可滚动的距离） ocont.scrollTop=ocont.scrollHeight
vue3聊天定位到最下面
yun_shuo的博客
08-25 2179
vue3聊天定位到最下面 在vue中做聊天功能时,消息模块通常是固定高度后设置overflow:auto;但当消息过多后,会产生滚动条,这时将消息默认定位到底部可以利用scrollIntoView()方法。关键代码如下； nextTick(() => { chatRoom.value.lastElementChild.scrollIntoView() }) scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。 nextTick()是将回调
vue实现聊天栏定位到最底部（超简单、可直接复制使用）
weixin_42966151的博客
11-21 1361
通过watch监听聊天内容的加载，一旦加载完成或者数据更新触发vue的数据监听时，就重新修改【滚动滑钮到滚动条顶部的距离=滚动条的高度】，从而实现定位到底部的效果。这里的messnowList是我的消息储存集合，用于判断数据变化，这个可以根据你实际情况修改，通过id绑定刚才的聊天框div，然后修改实现定位底部。新建一个div（聊天框，如下），给他一个id，一会要用到。
js 监听滚动条是否滚动到底部
tengyuxin的博客
05-04 1871
【代码】js 监听滚动条是否滚动到底部。
WebView加载Html片段监听滑动到底部
bigfc的博客
11-06 1112
WebView加载Html片段监听滑动到底部
js监听页面或元素scroll事件，滚动到底部或顶部
热门推荐
彭世瑜的博客
06-24 2万+
基本原理： 监听页面滚动 同理，也可以监听元素的滚动 判断触底需要注意的点：
scroll滚动事件如何监听页面是否滚动到底部
m0_70015558的博客
07-07 3977
监听是否滚动到底部多数应用在加载更多之类的功能。话不多说，直接上菜。考虑vue渲染规则 需要在元素渲染后执行scroll监听 否则获取不到对应dom节点 所以需要配合使用 $nextTick()cont是监听区域，‘scroll’是添加事件，this.scroll是方法。 scroll判断是否到底部 如果没有要加载数据了，就可以把scroll事件移除了 这就是监听是否滚动到底部的全部内容了。描述如有错误，欢迎指正！.........
web h5踩坑及解决办法（z-index,滚动到底部，同步滚动等）
C05230的博客
07-06 1103
开发web移动端项目时，遇到的疑难问题及解决
js 监听页面滚动到底部，监听可视区域滚动到底部
PrimaryColor
03-18 5419
全局页面body上的底部监听： window.onscroll = function(){ var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; var scr
JavaScript 监听页面滚动到底部 监听盒子内滚动到底部
悟空—
11-01 1194
1.JS监听页面滚动到底部 window.onscroll = function() { if ((document.documentElement.scrollTop + document.documentElement.clientHeight) == document.documentElement.scrollHeight) { alert('到底了') } } 2.监听盒子内滚动到底部 boxScroll('news-container2', 'fun',
vue3-seamless-scroll 监听数据滚动到底部
最新发布
06-26
`vue3-seamless-scroll`是一个用于Vue 3应用中的无限滚动库，它提供了一种便捷的方式来处理滚动事件，特别是在数据加载和滚动到底部加载更多场景中。当你想要监听页面滚动到底部，以便自动加载更多数据，你可以使用`vue3-seamless-scroll`提供的`scroll-event`或`scroll-position`指令。 以下是使用`vue3-seamless-scroll`监听数据滚动到底部的基本步骤： 1. 安装`vue3-seamless-scroll`库： ```bash npm install vue3-seamless-scroll ``` 2. 在你的Vue组件模板中，将滚动容器包裹在`<seamless-scroll>`组件中，并添加`v-loading`和`v-scroll-end`指令： ```html <template> <div class="scroll-container"> <seamless-scroll :data="items" ref="scrollRef"> <div v-for="(item, index) in items" :key="index">{{ item }}</div> </seamless-scroll> <button @click="loadMore" v-if="loading">加载更多</button> </div> </template> ``` 3. 在组件的script部分，设置数据源`items`，并初始化`scrollRef`和`loading`状态： ```javascript import { ref, onMounted, emit } from 'vue'; export default { data() { return { items: [], // 假设这是你的数据数组 loading: false, lastItem: null, // 记录最后渲染的元素 }; }, setup() { const scrollRef = ref(null); onMounted(() => { // 首次加载所有数据 this.items = ...; // 根据实际情况填充数据 // 当滚动结束时，检查是否加载了更多数据 scrollRef.value.addEventListener('scroll-end', () => { if (scrollRef.value.isBottom()) { this.loadMore(); } }); }); // 加载更多数据的方法 function loadMore() { this.loading = true; // 加载更多数据的API请求，完成后更新items并清空loading标志 fetchMoreData().then((newItems) => { this.items = [...this.items, ...newItems]; this.lastItem = newItems[newItems.length - 1]; // 更新lastItem this.loading = false; }); } return { scrollRef, loadMore }; }, }; ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值