Vue如何控制鼠标滚轮滚动的距离，Vue如何控制鼠标滚轮在元素中滚动一次的距离

苗同学

好奇者

首先是解决问题的代码 ，之后在讲解原理，以及自己的历程

代码

元素：
<div  ref="menu" @scroll="mouseScroll"> </div>
注意：元素必须是有滚动条的(本方法之支持上下滚动)

 data(){
    return {
              settm_2:true,
              tmat: "",
              settm_3: 0,
              settm_4: 0,
methods: {
    //    item  参数为数字，正数为向上，负数为向下----- 列：10，-10
    //鼠标滚动封装函数
    fun_going(item) {
      this.$refs.menu.scrollTop = this.settm_3;
      clearTimeout(this.tmat);
      this.tmat = setTimeout(() => {
          this.$refs.menu.scrollTop = this.$refs.menu.scrollTop + item;
          this.settm_3 = this.$refs.menu.scrollTop;
          this.settm_4 = this.$refs.menu.scrollTop;
      }, 100);
    // 鼠标滚动事件
    mouseScroll() {
      if (this.$refs.menu.scrollTop > this.settm_4) {
        //向下运动时
        this.fun_going(10);
      if (this.$refs.menu.scrollTop < this.settm_4) {
        //向上运动时
        this.fun_going(-10);

原理

由于@scroll是在判定鼠标滚轮滚动的时候执行函数，当你的滚动条滚到不能在滚得时候就不会再执行，所以在你滚到底或者顶的时候，函数不会再执行。

我这里设置了一个变量来记录元素滚动条滚动后的距离顶部的值，所以我一开始是设置settm_4:0

用this.$refs.menu.scrollTop获取滚动条距离顶部的值

当滑动的时候触发函数mouseScroll，并把this.$refs.menu.scrollTop赋值给this.settm_4来记录距离顶部的值方便判断。

然后用if语句

      if (this.$refs.menu.scrollTop > this.settm_4) {
        //向下运动时
       this.settm_4=this.$refs.menu.scrollTop
      if (this.$refs.menu.scrollTop < this.settm_4) {
        //向上运动时
        this.settm_4=this.$refs.menu.scrollTop

向下滑动时，this.$refs.menu.scrollTop比this.settm_4默认的0大，所以进入第一个if,并且记录下这次滑动距离顶部的值。

向上滑动时，this.$refs.menu.scrollTop比向下滑动时记录的this.settm_4的值要小，所以进入第二个if

这样就实现了判断滚动条是向下还是向上运动。

接下来举一个例子实现当向下滚动时控制距离（向上滚动同理），我这里采用是定时器

 if (this.$refs.menu.scrollTop > this.settm_4) {
        //向下运动时对距离顶部的值进行拦截，使它固定等于settm_3（初始为0）方便用来自己控它的距离
      this.$refs.menu.scrollTop = this.settm_3;
      //取消定时器，因为滑动一次鼠标滚轮，该函数会多次执行（大概为12次左右），如果执行多次他会
      //反复向下滑动你想让他滑动的距离（大概为12次左右），但是我们只想让他执行一次就够了，所以
      //可以用定时器实现，每次进入的时候先停止定时器，然后再开启，这样就可以只在最后一次执行计时器
      clearTimeout(this.tmat);
      this.tmat = setTimeout(() => {
          // item为需要向下移动的值
          // 由于滚动条有变化，所以会再次执行该函数（mouseScroll）
          this.$refs.menu.scrollTop = this.$refs.menu.scrollTop + item;
          // 更新settm_4的值，用来判断滚动条是向上还是向下滑动
          // 因为它是自执行不是鼠标滚轮执行的，所以 this.$refs.menu.scrollTop == this.settm_4;
          // 它不会走>或<的if语句
          this.settm_4 = this.$refs.menu.scrollTop;
          // 更新settm_3 的值，方便下一次拦截