vue检测div滚动到底部

   nextTick(() => {
        const el = document.querySelector(".list");
        const offsetHeight = el.offsetHeight;
        el.onscroll = () => {
          const scrollTop = el.scrollTop;
          const scrollHeight = el.scrollHeight;
          if (offsetHeight + scrollTop - scrollHeight >= 0) {
            console.log("到达底部")
          }
        };
      });
### Vue2 实现 div 滚动底部触发事件 为了实现在 `div` 元素滚动底部时触发相应操作的功能,可以采用监听 `div` 的滚动事件并判断是否已达到底部的方式。下面提供一种基于 Vue2 和上述参考资料中的方法来实现这一功能。 #### HTML 结构定义 首先,在模板部分创建一个具有特定类名的容器用于显示列表项,并为其绑定自定义的滚动处理函数: ```html <div ref="scrollBox" class="scroll_box" @scroll="handleScroll"> <div v-for="(item, index) in items" :key="index">{{ item }}</div> </div> ``` 这里通过 `ref` 属性指定了该元素的一个引用名称以便后续访问它的真实 DOM 对象;同时设置了内联样式使此区域可滚动(`overflow-y: auto`)。 #### CSS 样式设定 接着为 `.scroll_box` 添加必要的样式使其能够正常显示滚动条: ```css .scroll_box { height: 300px; overflow-y: auto; } .item { padding: 10px; border-bottom: 1px solid #ccc; } ``` 以上代码片段设定了固定高度以及允许纵向溢出的内容被隐藏起来形成滚动条的效果[^3]。 #### JavaScript 方法编写 最后,在组件内部定义响应于滚动行为变化的方法——即每当用户上下拖拽滚动条时都会调用这个回调函数来进行逻辑运算: ```javascript export default { data() { return { items: Array.from({ length: 20 }).map((_, i) => 'Item ' + (i + 1)) } }, methods: { handleScroll(event) { const el = event.target || this.$refs.scrollBox; // 判断是否接近或已经到达底部 if ((el.scrollTop + el.offsetHeight >= el.scrollHeight - 5)) { console.log('Reached near bottom'); // 此处放置实际业务逻辑,比如加载更多数据等... } } } }; ``` 这段脚本里包含了两个主要的部分:一是初始化了一些模拟的数据作为初始展示内容;二是实现了名为 `handleScroll()` 的处理器用来检测当前视窗位置相对于整个文档的高度比例关系,一旦满足条件则打印一条消息表示达到了指定范围内的最底端[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值