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

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

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

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

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

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

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

后面继续写对应的css样式

    .scrollBox {
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }

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

写完后我们开始写js逻辑

let mousetop = 0;

    const my_mousewheel = (e) => {

      if ((mousetop + e.deltaY) <-1 || (mousetop + e.deltaY) > (document.querySelector(".scrollBox").scrollHeight - document.querySelector(".scrollBox").offsetHeight + 1)) {
        //这里初略判断滚动是否到顶部或者到底部
        if ((mousetop + e.deltaY) <-1 && mousetop >= 1) {
          //二次判断是否真到顶部
          mousetop = 0;
          document.querySelector(".scrollContent").style.removeProperty("transform");
          return;
        }

        if ((mousetop + e.deltaY) > (document.querySelector(".scrollBox").scrollHeight - document.querySelector(".scrollBox").offsetHeight + 1) && mousetop <= (document.querySelector(".scrollBox").scrollHeight- document.querySelector(".scrollBox").offsetHeight) - 1) {
          //二次判断是否真到底部
          mousetop = document.querySelector(".scrollBox").scrollHeight - document.querySelector(".scrollBox").offsetHeight;
          document.querySelector(".scrollContent").style.cssText = `transform: translate3d(0,-${mousetop}px,0);`;
          return;
        }
        return;
      }

      mousetop += e.deltaY;
      document.querySelector(".scrollContent").style.cssText = `transform: translate3d(0,-${mousetop}px,0);`;
    }

    document.querySelector(".scrollBox").Onmousewheel= my_mousewheel;

最后到了附上源码

教程到此结束，希望可以帮到你们