监听滚动事件来控制页面变化

「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」

大家好，我是 摸鱼小公举，真正的强者，不会怨天尤人，如果想不被别人看轻，你就只有付出比别人多十倍百倍的努力，才能站的比别人更高。上一篇文章是 js 各种循环的区别 ；今天我们来学习一下通过监听滚动事件来控制页面变化。

给页面添加滚动事件

先在methods里面写一个获取滚动高度的方法 ( 最外层元素里面第一层的元素 ),然后mounted里面获取最外层元素的元素再添加监听滚动事件并调用获取滚动高度的方法;最后在beforeDestroy的生命周期钩子里面清除监听滚动事件。

mounted() {
    document
      .getElementById('main-content')
      .addEventListener('scroll', this.handleScroll) // 监听（绑定）滚轮滚动事件
  },
  
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },

自定义的滚动的几种种方法

只适用于滚动就触发机关的需求，方法不是一成不变，可根据自己的需求来修改。

handleScroll(e) {
     const hearder = document
       .getElementById('content-wrapper')
       .getClientRects()[0]
     if (hearder) {
       this.hideHearderBg = hearder.top == 0
      }
}

或者
handleScroll(e) {
     this.scrollTop = document
       .getElementById('content-wrapper')
       .scrollTop
     if (this.scrollTop ) {
       this.hideHearderBg = this.scrollTop  < 46 
      }
}

此方法初始化开关显示开然后是滚动到底部开关显示关再滚动离开底部开关显示开

handleScroll() {
  const { clientHeight, scrollHeight, scrollTop } = this.$refs.agreement;
  if (scrollTop / (scrollHeight - clientHeight) == 1) {
  this.hideHearderBg = true;
  } else {
  this.hideHearderBg = false;
  }
},

将其js逻辑运用到HTML 和 CSS

然后常用于头部根据滚动距离或者返回顶部等应用场景；通过滚动高度来控制是否显示样式。

HTML代码 这里是我的头部组件引用
<my-header :class="[hideHearderBg?'hide-bg':'']" title="金融服务">

CSS代码  需要改变的样式 
 .hide-bg{
     /deep/ .van-nav-bar{
     background-color:transparent;
     i.iconfont, 
     .van-nav-bar_title{
         color:#fff;
     }
     &.van-hairline--bottom::after{
         border-bottom-width:0 ;
     }
 }
 }

实现效果如下 （看头部和底部的样式变化）

结语：

好了文章到此就结束了，欢迎大家( 点赞+评论+关注 ) 有问题可以来互相交流一下。希望这篇文章对大家有帮助,也希望大家多多支持我，今天是我参与2022首次更文挑战的第21天，加油！坚持就是胜利。