vue2(标签-chrome|关键词-浏览器兼容)

Question

vue2项目中使用数字滚动效果，chrome浏览器和edge浏览器没问题，firefox打开就变样了。是浏览器兼容问题吗，不知道怎么解决（图片附下面）

chrome浏览器打开的

firefox浏览器打开的

数字滚动是cv来的，封装好的代码，代码如下

<template>
  <div
    style="
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;
    "
  >
    <div
      v-for="(item, index) in numberList"
      :key="index"
      style="
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 0.3rem;
        box-sizing: border-box;
      "
    >
      <span v-if="isNaN(item)">{{ item }}</span>
      <div class="number" v-else :style="{ color: TextColor }">
        <span
          class="number-item"
          ref="numberItem"
          :data-number="item"
          :data-index="index"
          >0123456789</span
        >
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "ScrollNumber",
  props: {
    value: {
      type: [String, Number],
      default: 0,
    },
    TextColor: {
      type: [String],
      default: "black",
    },
  },
  watch: {
    value: {
      handler(newValue, oldValue) {
        // console.log("🚀 ~ value ~ newVal:", newValue);
        if (newValue) {
          this.$nextTick(() => {
            this.setNumberTransform();
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    numberList() {
      return String(this.value).split("");
    },
  },
  data() {
    return {
      hasShow: false, // 是否已展示过动画
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollHandle, true); // 监听 监听元素是否进入/移出可视区域
  },

  methods: {
    scrollHandle() {
      const offset = this.$el.getBoundingClientRect();
      const offsetTop = offset.top;
      const offsetBottom = offset.bottom;
      // 进入可视区域
      if (offsetTop <= window.innerHeight && offsetBottom >= 0) {
        this.setNumberTransform();
        this.hasShow = true;
        window.removeEventListener("scroll", this.scrollHandle, true);
      } else {
        // 移出可视区域
        if (this.hasShow) {
          window.removeEventListener("scroll", this.scrollHandle, true);
        }
      }
    },
    // 设置每一位数字的偏移
    setNumberTransform() {
      let numberItems = this.$refs.numberItem;
      let obj = {};
      Array.from(numberItems).forEach((c) => {
        let key = c.dataset.index;
        let value = c.dataset.number;
        let init = 0;
        obj[key] = setInterval(() => {
          if (init < value * 10) {
            init += 1;
            c.style.transform = `translateY(-${init}%)`;
          } else {
            clearInterval(obj[key]);
            obj[key] = null;
          }
        }, 8);
      });
    },
  },
};
</script>
 
<style scoped lang="scss">
.number {
  width: 27px;
  height: 35px;
  font-size: 25px;
  font-weight: 800;
  text-align: center;
  overflow: hidden;
  span {
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
    transform: translateY(0%);
  }
}
</style>

如果能解决请附代码谢谢！

Answer 1

该回答引用ChatGPT辅助答疑，若有帮助，还请题主采纳。

---

根据你提供的代码和问题描述，我注意到在 Firefox 浏览器中，数字滚动效果显示有问题。这可能是由于 Firefox 对 writing-mode 属性的处理方式与 Chrome 和 Edge 不同所致。为了解决这个问题，你可以尝试以下修改：

将 <span> 标签的样式中的 writing-mode: vertical-rl; 改为 writing-mode: vertical-lr;，即从垂直从右到左改为垂直从左到右。修改后的代码如下：

<style scoped lang="scss">
.number {
  width: 27px;
  height: 35px;
  font-size: 25px;
  font-weight: 800;
  text-align: center;
  overflow: hidden;
  span {
    text-align: center;
    writing-mode: vertical-lr; /* 修改这一行 */
    text-orientation: upright;
    transform: translateY(0%);
  }
}
</style>

这样修改之后，应该可以解决数字滚动效果在 Firefox 浏览器中显示有问题的情况。请尝试一下并确认是否解决了问题。如果你还有其他问题，请随时告诉我。