问题遇到的现象和发生背景
是这样，我想监听滚轮事件来达到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滚动到底部的事件。
