vue监测滚动条滑倒底部

不想上班的一天又一天

已于 2023-01-11 06:46:45 修改

阅读量1k

点赞数

分类专栏：错误总结文章标签： vue.js 前端 javascript

于 2023-01-11 06:45:59 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44068262/article/details/128638709

版权

错误总结专栏收录该内容

7 篇文章

订阅专栏

文章介绍了在Vue.js中如何使用@scroll事件来监听滚动到底部的情况。关键在于div需要有固定的高度和overflow:auto属性。提供了两种不同的样式写法，并展示了JavaScript代码来检测是否滚动到页面底部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 @scroll 事件

div一定要有固定得高度，否则不触发

<template>
  <div class="warp srcoll-content" @scroll="scrollBottom">
    .....
  </div>
</template>

// 样式写法一
.srcoll-content {
  height: 100vh;
  overflow: auto;    // 必不可少
}

// 样式写法二
.srcoll-content {
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  bottom: 0;
  overflow: auto;
}

// js
// 监测滚轮滑倒底部了
scrollBottom() {
  let scrollTop = document.documentElement.scrollTop
  let clientHeight = document.documentElement.clientHeight
  let scrollHeight = document.documentElement.scrollHeight
  console.log("1----scrollTop",scrollTop);
  console.log("2----clientHeight",clientHeight);
  console.log("3----scrollHeight",scrollHeight);
}