前端中，如何在目前高度是100vh的时候，监听滚轮滚动的事件？

Question

问题遇到的现象和发生背景

是这样，我想监听滚轮事件来达到div模块的切换，但是第一个div的高度设好了100vh，大概是因为没有滚动条的缘故，滚动滚轮并没有触发事件。

问题相关代码，请勿粘贴截图

以下是template的代码

<template>
  <div>
    <!--   此div的高度为100vh   -->
    <div v-if="action === 1" id="banner">
      <banner />
      <nav1 />
      <nav2 />
       <!-- 假设我在这里撑开1px高度 -->
      <hr style="height: 1px;padding: 0;margin: 0;border: 0;" />
    </div>

    <div style="width: 100%;background: aquamarine;height: 300vh;" v-else>
    </div>
  </div>
</template>

以下是事件代码

data() {
    return {
      action: 1
    }
  },
  mounted() {
    window.addEventListener('scroll', this.changeWheel)
  },
  methods: {
    changeWheel() {
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        console.log('距离顶部的距离' + scrollTop)
        //变量windowHeight是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        console.log('可视区的高度' + windowHeight)
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        console.log('滚动条的总高度' + scrollHeight)
      if (this.action === 1 && scrollHeight - scrollTop === windowHeight){
        this.action = 2
      } else if (this.action === 2 && scrollTop === 0) {
        this.action =1
      }
    }
  }

我的解答思路和尝试过的方法

尝试过在第一个div中把用一个小模块把高度撑到100vh + 1px来解决监听第一个div滚动到底部的问题，问题解决，但是终归还是出现了滚动条不美观。

我想要达到的结果

我想寻找一下有没有办法在不出现滚动条的情况下监听第一个div滚动到底部的事件。

Answer 1

滚动你就得看是哪个元素在滚动，审查元素一下，哪一个的高度比较高且处于最上位的那个就是滚动的那个，把事件添加到对应的元素就行，如果你一定要第一个div滚动又不要滚动条，其实存在样式可以去掉对应的滚动条。