听别人说用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. Linux实战（2）：Linux传输文件

    此次使用的是scp命令,只是针对文件或者文件的传输,并没有什么高端的使用,主要是怕自己忘记了记一下. 传输文件,命令说明:scp+文件路径针确到文件名+账号+上传到另一台的路径并另存为文件名 scp ...

  2. nginx的安装和启动

    https://www.cnblogs.com/wyd168/p/6636529.html nginx开机启动 https://www.cnblogs.com/gimin/p/8893559.html

  3. thinkPHP5.1 MVC架构使用方法

    MVC架构 1.M层:model(模型),是增强版的数据库 M层是用来存放自动完成代码.修改器(数据修改).模型事件.验证器 2.V层:view 显示视图 V层用来存放HTML.css.JavaScr ...

  4. 5.CyclicBarrier-栅栏

  5. 从Class源码看反射

    日常敲码中,如果想要在程序运行阶段访问某个类的所有信息,并支持修改类的状态或者行为的话,肯定会用到反射,而反射靠的就是Class类.Java的动态代理也用到了这个东西,所以了解其基本操作在苦逼的CRU ...

  6. Java Web学习（八）RESTful设计

    一.RESTful设计风格 REST :指的是一组架构约束条件和原则. RESTful :满足这些约束条件和原则的应用程序或设计就是 . REST 原则 客户端和服务器之间的交互在请求之间是无状态的. ...

  7. PHP图片压缩类，高清无损直接用就ok啦

    这个不完全是我自己写的-_-!,但是好用呀 <?php /** * Created by PhpStorm. * Note:文件介绍 * User: Lynly * Date: 2018/11/ ...

  8. ksoap2-android的简单使用

    soap2-android 官网地址 https://simpligility.github.io/ksoap2-android/index.html 发行版本 https://oss.sonatyp ...

  9. mysql笔记--基础知识

    SQL基础 SQL语句的分类: DQL: 数据库查询语句,基本的就是select查询命令,用于查询数据 DML: 数据操纵语句,用于插入,更新,删除数据,即INSERT, UPDATE,DELETE ...

  10. IDM下载度盘文件

    百度网盘是百度公司推出的一款个人云服务产品.百度网盘官方版操作简单,我们打开后就可以使用该软件来上传.下载文件等.不仅如此百度网盘软件还可以批量上传文件.支持断点传续等功能,重要的是上传的文件不会占用 ...