听别人说用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实现硬件加速渲染自定义滚动条的更多相关文章

  1. Chromium硬件加速渲染的UI合成过程分析

    在Chromium中.Render端和WebGL端绘制出来的UI终于是通过Browser端显示在屏幕上的.换句话说.就是Browser端负责合成Render端和WebGL端的UI.这涉及到不同Open ...

  2. CSS动画原理及硬件加速

    一.图层 图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的<CSS层叠上下文和层叠顺序>,这里我们简单复习一下产生层叠上下文的原因. 1.根层叠上下文 指的是页面根元素 ...

  3. 模仿yui将css和js打包，加速网页速度

    如果你有机会用firebug看看自己网站的网络请求,你会发现请求数量之多超乎你的想象.为减少这个数量,有许多技术方案.比如yui的combo,会将所有需要的js混合成一个文件下载,现代web服务器好像 ...

  4. js拖拽案例、自定义滚动条

    简单实例: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  5. css实现硬件加速

    原文请点击一下链接: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-c ...

  6. CSS开启硬件加速 hardware accelerated

    作者:孙志勇 微博 日期:2016年12月6日 一.时效性 所有信息都具有时效性.文章的价值,往往跟时间有很大关联.特别是技术类文章,请注意本文创建时间,如果本文过于久远,请读者酌情考量,莫要浪费时间 ...

  7. 后端自动构建前端css和js

    引子: 别的复杂前端开发技术不会,用得多的还是手写代码,手动处理. 3年前手写合并压缩js和css文件的asp脚本代码目前还能正常运行,也就没有多大使用别的技术的动力. 直到近期被一个问题纠结着,今天 ...

  8. 今天写了一个SSM小项目，运行之后，前端页面的CSS、js样式显示不出来，具体操作如下：

    因为SSM中我们设置了拦截器,拦截器会拦截CSS和JS,所有样式渲染不出来,在Web.xml中写上 1 <servlet-mapping> 2 <servlet-name>de ...

  9. 使用CSS3开启GPU硬件加速提升网站动画渲染性能

    遇到的问题: 网站本身设计初衷就没有打算支持IE8及以下版本浏览器,并不是因为代码兼容性问题,而是真的不想迁就那些懒得更新自己操作系统和浏览器的用户,毕竟是我自己的网站,所以我说了算!哈哈~ 没有了低 ...

随机推荐

  1. CentOS 7使用PuppeteerSharp无头浏览器注意事项

    环境: CentOS 7.6.1810 .net core 3.1 PuppeteerSharp 2.0.0 1.如网络部稳定可以提前下载需要的chromium 下载地址:https://storag ...

  2. Angular用户输入

    用户输入 事件绑定 使用 (event) on-event 概念 ​ 用户操作 -> DOM事件 用户操作 点击链接 按下按钮 输入文字 DOM事件 $event 类型 any 不能推测属性 可 ...

  3. 技术解析丨C++元编程之Parser Combinator

    摘要:借助C++的constexpr能力,可以轻而易举的构造Parser Combinator,对用户定义的字符串(User defined literal)释放了巨大的潜力. ## 引子 前不久在C ...

  4. java之死锁

    转载自 https://www.cnblogs.com/xiaoxi/p/8311034.html 一.死锁的定义 多线程以及多进程改善了系统资源的利用率并提高了系统 的处理能力.然而,并发执行也带来 ...

  5. CRM、用户管理权限

    CRM目录结构 from django.shortcuts import HttpResponse,render,redirect from django.conf.urls import url f ...

  6. vue中axios的使用

    新开了一个vue项目,从头到尾都是一个人做的,所以就自己配置了一个axios.js文件 第一种方法.使用axios 需要下载安装   npm install axios,下载完成之后 在main.js ...

  7. 【读书】Into The Air：进入空气稀薄地带

    珠穆朗玛峰,世界第一高峰,北部在中国境内,南部在尼泊尔境内.喜欢户外运动的人,曾经在20多岁的时候曾经"大言不惭"说这一辈子一定要去一次珠峰.<Into the Air> ...

  8. linux学习（三）Linux 系统目录结构

    一.查看目录 登录系统后,在当前命令窗口下输入命令: ls / 树状目录结构: 二.目录解析 /bin: 存放二进制可执行文件(ls,cat,mkdir等). /boot: 存放启动Linux时使用的 ...

  9. SSH 框架常见错误

    新手学习SSH框架的时候总会遇到很多问题,一碰到404 或者500错误就不知道怎么解决. 404错误是很常见的一个错误,如果没有用框架基本上只可能是没有这个路径或者文件,但是用了框架之后404的原因就 ...

  10. 在Linux系统下搭建和配置一个minio文件服务器（一）

    1.minio文件服务器的介绍 Minio 是一个基于Go语言的对象存储服务.它实现了大部分亚马逊S3云存储服务接口,可以看做是是S3的开源版本,非常适合于存储大容量非结构化的数据,例如图片.视频.日 ...