滚动到底判断

Jackchen9900

于 2022-05-21 16:49:31 发布

阅读量215

点赞数 1

文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/Jackchen9900/article/details/124900290

版权

Vue.js 滚动事件滚动到底部事件监听 DOM操作

关键词由CSDN通过智能技术生成

判断滚动是否到底。比如用户须知，到底后按钮点亮。代码用如下方法实现

<template>
  <div class="aa">
    <div class="box" ref="box">
      <p>1123123</p>
      <p>21323</p>
      <p>1123123</p>
      <p>21323</p>
      <p>1123123</p>
      <p>21323</p>
      <p>1123123</p>
      <p>1123123</p>
      <p>21323</p>
      <p>1123123</p>
      <p>21323</p>
      <p>1123123</p>
      <p>21323</p>
      <p>1123123</p>
      <p>21323</p>

      <p>21323</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "aa",
  mounted() {
    const dom = this.$refs.box;
    const VisualHeight = dom.clientHeight; //内容可视高度200
    const ActualHeight = dom.scrollHeight; //实际高度297
    dom.onscroll = function (e) {
      const scrollTop = dom.scrollTop; //滚动高度
      if (ActualHeight - scrollTop <= VisualHeight) {
        alert("滚动到底了");
      } else {
        console.log("没有滚动到底部");
      }
    };
  },
};
</script>

<style scoped lang="less">
.aa {
  .box {
    height: 200px;
    width: 100px;
    border: 1px solid black;
    margin: auto;
    overflow: auto;
  }
}
</style>