Question

我需要监听页面的滚动事件，根据滚动方向，它应该能够改变元素的css类。如果向右/向左滚动，则应将一个 css 类添加到元素，并从另一个元素中删除该 css 类。如果向下/向上滚动发生，则上述更改应以相反的方式发生。我的尝试如下。

created() {
 window.addEventListener("scroll", this.handleScroll);
},
destroyed() {
 window.removeEventListener("scroll", this.handleScroll);
},
data() {
  return {
    isDisableScrollableForTable: false,
    isDisableScrollableForSub: false
  };
}
methods: {
 handleScroll(event) {
  $el.on("scroll", function() {
    // get current scroll position
    const currY = $el.scrollTop();
    const currX = $el.scrollLeft();

    // determine current scroll direction
    const currDir = {
      x:
        currX > lastPos.x ? "right" : currX === lastPos.x ? "none" : "left",
      y: currY > lastPos.y ? "down" : currY === lastPos.y ? "none" : "up"
    };

   
    if (currDir.x == "left" || currDir.x == "right") {
      this.isDisableScrollableForSub = true;
      this.isDisableScrollableForTable = false;
      
      console.log("horizontal scroll");
    } else if (currDir.y == "up" || currDir.y == "down") {
      this.isDisableScrollableForSub = false;
      this.isDisableScrollableForTable = true;
     
      console.log("vertical scroll");
    }
    // update last scroll position to current position
    lastPos.y = currY;
    lastPos.x = currX;
  });
 }
}
<div
  id="subScrolling"
  :class="{ isDisableScrollable: isDisableScrollableForSub }">
</div>
<div
  id="tableScrolling"
  :class="{ isDisableScrollable: isDisableScrollableForTable }">
</div>

这里可以正确识别滚动方向。但是 css 类没有限制。我哪里出错了，我该如何解决？

Answer 1

您需要使用 arrow function 来保留 this 上下文：

$el.on("scroll", () => {
...
})

否则回调函数会注入自己的this

Answer 2

首先，如果你想做任何与DOM相关的动作，你必须在mounted生命周期中调用。第二件事是我们应该针对我们想要监听的文档元素。就我而言，我使用 ref prop 来定位元素，然后在挂载的函数中，我启动了侦听器并开始侦听事件。

此外，我们不需要使用 $el，因为它是未定义的，并且在您为它分配任何元素之前不会针对 vue.js 中的任何内容。

我们不多说，检查工作代码下面的示例。

<template>
  <div ref="scrollContainer">
    <div
      id="subScrolling"
      :class="{ isDisableScrollable: isDisableScrollableForSub }">
    </div>
    <div
      id="tableScrolling"
      :class="{ isDisableScrollable: isDisableScrollableForTable }">
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.scrollContainer.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
  this.$refs.scrollContainer.removeEventListener("scroll", this.handleScroll);
  },
  data() {
    return {
      isDisableScrollableForTable: false,
      isDisableScrollableForSub: false
    };
  },
  methods: {
    handleScroll(event) {
        // get current scroll position
        const currY = event.target.scrollTop;
        const currX = event.target.scrollLeft;
        let lastPos = {x: 0, y: 0}
        // determine current scroll direction
        const currDir = {
          x:
            currX > lastPos.x ? "right" : currX === lastPos.x ? "none" : "left",
          y: currY > lastPos.y ? "down" : currY === lastPos.y ? "none" : "up"
        };

      
        if (currDir.x == "left" || currDir.x == "right") {
          this.isDisableScrollableForSub = true;
          this.isDisableScrollableForTable = false;
          
          console.log("horizontal scroll");
        } else if (currDir.y == "up" || currDir.y == "down") {
          this.isDisableScrollableForSub = false;
          this.isDisableScrollableForTable = true;
        
          console.log("vertical scroll");
        }
        // update last scroll position to current position
        lastPos.y = currY;
        lastPos.x = currX;
    }
  }
}
</script>

在Vue js中动态更改元素类的滚动方向

2 个答案: