听别人说用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. 项目初始化CSS公共样式

    /*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document =========== ...

  2. hystrix文档翻译之插件

    插件 可以通过实现插件来改变Hystrix的行为.可以通过HystrixPlugins来注册自定义插件,这些插件会被应用到HystrixCommand,HystrixObservableCommand ...

  3. 灵活使用 SQLAlchemy 中的 ORM 查询

    之前做查询一直觉得直接拼 SQL 比较方便,用了 SQLAlchemy 的 ORM 查询之后,发现也还可以,还提高了可读性. 这篇文章主要说说 SQLAlchemy 常用的 ORM 查询方式,偏实践. ...

  4. Redis中String类型的相关命令操作

    String append 如果key已存在,则直接在value追加值,如果key不存在,则会插件一个新的value为空的key,然后在追加 127.0.0.1:6379> set name l ...

  5. Linux的MySQL安装方法

    第一种: APT方式安装 在ubuntu系统的apt软件仓库中,默认存在MySQL数据库 在用户模式下使用命令:  apt/apt-get install mysql-server mysql-cli ...

  6. SSRF漏洞（原理、漏洞利用、修复建议）

    介绍SSRF漏洞 SSRF (Server-Side Request Forgery,服务器端请求伪造)是一种由攻击者构造请求,由服务端发起请求的安全漏洞.一般情况下,SSRF攻击的目标是外网无法访问 ...

  7. CSS实现图片圆角显示

    问题描述 在自定义博客园侧边栏公告时,想增加博客头像,但图片默认显示成是方形的,不是很好看,想着改成圆角显示会漂亮些 解决方案 增加css样式 border-radius:25px; 上面的像素值根据 ...

  8. NN相关资源（持续更新）

    Iris数据介绍 http://www.cnblogs.com/Belter/p/8831216.html

  9. Leetcode-dfs & bfs

    102. 二叉树的层次遍历 https://leetcode-cn.com/problems/binary-tree-level-order-traversal/ 给定一个二叉树,返回其按层次遍历的节 ...

  10. golang go语言 实现链表

    package main import ( "errors" "fmt" "strconv" ) type List struct { Le ...