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

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

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

*::-webkit-scrollbar {
      width: 0 !important
    }
 
    /* IE 10+ */
    * {
      -ms-overflow-style: none;
    }
 
    /* Firefox */
    * {
      overflow: -moz-scrollbars-none;
    }

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

<template>
  <div class="scrollbody" ref="scrollbody" @mousewheel="lmousewheel">
    <div class="scrollBox">
      <div
        class="scrollContent"
        :style="{ transform: `translate3d(0,-` + mousetop + `px,0)` }"
      >
        <!-- 插槽 -->
        <slot> </slot>
      </div>
    </div>
  </div>
</template>

后面继续写对应的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;
    },
  },
};

最后到了附上源码

<template>
  <div class="scrollbody" ref="scrollbody" @mousewheel="lmousewheel">
    <div class="scrollBox">
      <div
        class="scrollContent"
        :style="{ transform: `translate3d(0,-` + mousetop + `px,0)` }"
      >
        <!-- 插槽 -->
        <slot> </slot>
      </div>
    </div>
  </div>
</template>
<script>
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;
    },
  },
};
</script>
<style scoped>
.scrollbody {
  height: 100%;
  overflow: hidden;
}
 
.scrollContent {
  transform: translate3d(0, 0px, 0);
  transition: all ease-out 0.6s;
}
</style>

调用

<template>
	<lscrollbar>你需要滚动的内容</lscrollbar>
</template>

<script>
import lscrollbar from "./lscrollbar.vue";
export default {
components: {
    lscrollbar
  }
}
</script>