元晖 2022-02-10 09:58 采纳率: 100%
浏览 142
已结题

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

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

是这样,我想监听滚轮事件来达到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滚动到底部的事件。

  • 写回答

2条回答 默认 最新

  • 在下月亮有何贵干 前端领域优质创作者 2022-02-10 10:07
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 不_足 2022-02-10 11:40
    关注

    不是很理解你这个描述,如果高度是100vh,内容不会超出设定的高度,怎么会有滚动条呢?没有滚动事件是监听不到的呀
    你想要做的效果是什么?要不你把样式贴一下吧
    上楼已经说了,可以给滚动条设置样式,浏览器的也可以设置的
    ::-webkit-scrollbar-track
    ::-webkit-scrollbar-thumb
    ::-webkit-scrollbar
    这些伪类可以了解一下

    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 2月18日
  • 已采纳回答 2月10日
  • 修改了问题 2月10日
  • 修改了问题 2月10日
  • 展开全部

悬赏问题

  • ¥15 基带到底是什么?为什么手机厂和厂外完全两个概念
  • ¥15 怎么下载MySQL,怎么卸干净原来的MySQL
  • ¥15 网络打印机Ip地址自动获取出现问题
  • ¥15 求局部放电案例库,用于预测局部放电类型
  • ¥100 QT Open62541
  • ¥15 stata合并季度数据和日度数据
  • ¥15 谁能提供rabbitmq,erlang,socat压缩包,记住版本要对应
  • ¥15 Vue3 中使用 `vue-router` 只能跳转到主页面?
  • ¥15 用QT,进行QGIS二次开发,如何在添加栅格图层时,将黑白的矢量图渲染成彩色
  • ¥50 监控摄像头 乐橙和家亲版 保存sd卡的文件怎么打开?视频怎么播放?