vue和css实现硬件加速渲染自定义滚动条

听别人说用CSS的变换来实现渲染有硬件加速的效果，看到很多大网站都开始陆续使用上了，我也来说说怎么做，我这边实现的滚动条有自然滚动效果，看起来比较自然，说的再多不如直接写，让我们开始吧！

我们需要自己定义页面滚动的话，我们肯定不想让浏览器自带的滚动条出现，所以我们要先隐藏页面所有的滚动条,下面的CSS样式是兼容各个浏览器的隐藏滚动条

*::-webkit-scrollbar {
      width: 0 !important
    }

    /* IE 10+ */
    * {
      -ms-overflow-style: none;
    }

    /* Firefox */
    * {
      overflow: -moz-scrollbars-none;
    }

滚动条隐藏起来了，我们下一步需要做的就是写页面代码

后面继续写对应的css样式

.scrollbody {
  height: 100%;
  overflow: hidden;
}

.scrollContent {
  transform: translate3d(0, 0px, 0);
  transition: all ease-out 0.6s;
}

写完后我们开始写vue逻辑

export default {
  data() {
    return {
      mousetop: 0,
    };
  },
  methods: {
    lmousewheel(e) {
      if (
        this.mousetop + e.deltaY < -1 ||
        this.mousetop + e.deltaY >
          this.$refs.scrollbody.scrollHeight -
            this.$refs.scrollbody.offsetHeight +
            1
      ) {
        //这里初略判断滚动是否到顶部或者到底部
        if (this.mousetop + e.deltaY < -1 && this.mousetop >= 1) {
          //二次判断是否真到顶部
          this.mousetop = 0;
          return;
        }

        if (
          this.mousetop + e.deltaY >
            this.$refs.scrollbody.scrollHeight -
              this.$refs.scrollbody.offsetHeight +
              1 &&
          this.mousetop <=
            this.$refs.scrollbody.scrollHeight -
              this.$refs.scrollbody.offsetHeight -
              1
        ) {
          //二次判断是否真到底部
          this.mousetop =
            this.$refs.scrollbody.scrollHeight -
            this.$refs.scrollbody.offsetHeight;
          return;
        }
        return;
      }
      this.mousetop += e.deltaY;
    },
  },
};

最后到了附上源码

调用