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

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

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

*::-webkit-scrollbar {

      width: 0 !important

    }

    /* IE 10+ */

    * {

      -ms-overflow-style: none;

    }

    /* Firefox */

    * {

      overflow: -moz-scrollbars-none;

    }

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

<div class="scrollBox">

    <div class="scrollContent">

      <!-- 你的内容 -->

      <!-- 内容结束 -->

    </div>

  </div>

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

最后到了附上源码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

  <style>

    *::-webkit-scrollbar {

      width: 0 !important

    }

    /* IE 10+ */

    * {

      -ms-overflow-style: none;

    }

    /* Firefox */

    * {

      overflow: -moz-scrollbars-none;

    }

    html,

    body {

      margin: 0;

      padding: 0;

      font-size: 100px;

      background: #fff;

    }

    a {

      text-decoration: none;

      text-decoration-color: #000;

      color: #000;

    }

    li {

      list-style: none;

    }

    .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;

    }

  </style>

</head>

<body>

  <div class="scrollBox">

    <div class="scrollContent">

      <!-- 你的内容 -->

      <!-- 内容结束 -->

    </div>

  </div>

  <script>

    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;

  </script>

</body>

</html>

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

巴特西

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

最新文章

热门文章