木灵鱼儿

木灵鱼儿

阅读：3111

最后更新：2021/06/04/ 18:07:41

vue 横向滚动组件

最近遇到这么一个需求，就是内容一行显示，滚轮滚动的时候，进行横向滚动。

本来想尝试下css能不能做到，最后发现，即便改变了流的布局，并不能改变滚动条的方向，最后还是只能用js做了。

滚动兼容性

滚轮只存在pc的时候，所以触摸事件是不考虑的，触摸的话可以直接用better-scroll插件。

滚动事件需要兼容火狐和谷歌：

  1. 火狐滚动事件：DOMMouseScroll
  2. 谷歌滚动事件：mousewheel

其中DOMMouseScroll的event对象，他有一个detail字段，向下滚动是3，往上滚动是-3

mousewheel的event对象是deltaY，往下滚动是125，往上是-125，具体数值记不清了，反正是这样。

兼容的情况就是这样了，字段不同。

组件代码

创建一个CrosswiseScroll.vue组件

调整：当不能横向滚动时，可以触发上下滚动，如果横向滚动到底了，会延迟一会，然后恢复滚轮上下滚动功能

代码如下：

<template>
  <div class="crosswise-scroll" @DOMMouseScroll.prevent="mouseTranslate" @mousewheel="mouseTranslate">
    <div class="crosswise-content" ref="crosswiseContent"
      :style="'transform: translateX(' + translateX + 'px);'">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      translateX: 0, //滚动的距离
      maxTranslateX: 0, //最大滚动距离
      flag: false,
    };
  },
  methods: {
    // 鼠标滚轮滑动事件
    mouseTranslate(event) {
      //没有最大滚动宽度进行计算
      if (!this.maxTranslateX) this.countMaxTranslateX();
      if (this.maxTranslateX <= 0) return;
      const delta = event.deltaY || event.detail;
      let x = this.translateX;
      if (delta > 0) {
        x =
          Math.abs(x - 100) >= this.maxTranslateX
            ? -this.maxTranslateX
            : x - 100;
      } else {
        x = x + 100 >= 0 ? 0 : x + 100;
      }
      this.translateX = x;
      console.log(this.translateX);
      if (
        this.translateX === 0 ||
        Math.abs(this.translateX) === this.maxTranslateX
      ) {
        clearTimeout(this.$timer);
        this.$timer = setTimeout(() => {
          this.flag = true;
        }, 300);
      } else {
        this.flag = false;
      }
      if (!this.flag) event.preventDefault();
    },
    //计算最大滚动距离
    countMaxTranslateX() {
      if (!this.crosswiseContent) {
        this.crosswiseContent = this.$refs.crosswiseContent;
      }
      this.maxTranslateX =
        this.crosswiseContent.scrollWidth - this.crosswiseContent.offsetWidth;
      if (Math.abs(this.translateX) >= this.maxTranslateX) {
        this.translateX = -this.maxTranslateX;
      }
    },
  },
  created() {
    //计算最大滚动距离
    // this.$nextTick(() => {
    //   this.countMaxTranslateX();
    // });
  },
  mounted() {
    window.addEventListener("resize", this.countMaxTranslateX, false);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.countMaxTranslateX, false);
  },
};
</script>
<style lang="scss" scoped>
.crosswise-scroll {
  overflow-x: hidden;
  .crosswise-content {
    transition: transform 0.1s;
  }
}
</style>

使用

<template>
  <crosswise-scroll>
    ...需要横向滚动显示的内容
  </crosswise-scroll>
</template>
<script>
  import CrosswiseScroll from "CrosswiseScroll";
  export default {
    components: {
      CrosswiseScroll,
    }
  }
</script>

注意：

  1. 横向滚动的内容自身不能overflow: hidden

简单点来理解就是，横向滚动的内容就是内容的实际宽度，他可以超出容器宽度，因为我们横向滚动就是为了应对这种情况的。

文章分类 vue 项目实战
文章标签 vue横向滚动DOMMouseScrollmousewheeldeltaYdetail
木灵鱼儿

木灵鱼儿

发布了 615 篇文章获得点赞 4获得阅读 3111

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 4
文章被阅读 3111

相关文章

vue-i18n 的使用方式vue-i18n 的使用方式
设计模式的7个设计原则设计模式的7个设计原则
第六章 设计模式第六章 设计模式
第五章 代码复用模式第五章 代码复用模式
第四章 对象的创建第四章 对象的创建