在Vue中滚动100px后显示div标签

<template>
  <div>
    <div v-scroll="handleScroll" class="scroll-container">
      <!-- 滚动内容 -->
    </div>
    <div v-if="showDiv" class="show-div">
      <!-- 要显示的div内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDiv: false, // 控制div显示与隐藏的变量
    };
  },
  methods: {
    handleScroll() {
      // 获取滚动的距离
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      
      // 判断滚动距离是否大于等于100px
      if (scrollTop >= 100) {
        this.showDiv = true;
      } else {
        this.showDiv = false;
      }
    },
  },
};
</script>

<style>
.scroll-container {
  height: 500px; /* 设置滚动容器的高度 */
  overflow-y: scroll; /* 开启垂直滚动条 */
}

.show-div {
  height: 200px; /* 设置要显示的div的高度 */
  background-color: #f0f0f0; /* 设置要显示的div的背景颜色 */
}
</style>