vue监测滚动条滑倒底部

避坑记录

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

阅读量897

点赞数

分类专栏：错误总结文章标签： vue.js 前端 javascript Powered by 金山文档

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

本文链接：https://blog.csdn.net/weixin_44068262/article/details/128638709

版权

错误总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用 @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);
}