早睡早起,方能养生
Sleep early rise early, way to keep healthy

js实现鼠标左右滑动,到底(或者回到开头)变为上下滑动

2023-04-07 13:38
views 1084

js实现鼠标左右滑动,到底(或者回到开头)变为上下滑动

 

data() {
    return {

      leftNum: 0,
      crossrange: true
    };
  },
  mounted() {
    const scrollContainer = this.$refs.scrollContainer;
    window.addEventListener('scroll', this.handleScroll);

    scrollContainer.addEventListener(
      "wheel",
      (e) => {
        if (window.innerWidth > 768 && this.crossrange == true) {
          e.preventDefault(); // disallows scrolling vertically
          scrollContainer.scrollLeft += e.deltaY; // scrolls container left by deltaY
          
          if (this.leftNum == scrollContainer.scrollLeft) {
            this.crossrange = false;
          } else {
            this.crossrange = true;
          }
          console.log("scroll", scrollContainer.scrollLeft);
          this.leftNum = scrollContainer.scrollLeft;
        }
      },
      { passive: false }
    );
  },
  methods: {
    handleScroll() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        this.crossrange = true;
    }
  },


分享
0 条讨论
top