听别人说用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. MySQL隐式转换的坑

    MySQL以以下规则描述比较操作如何进行转换: 两个参数至少有一个是 NULL 时,比较的结果也是 NULL,例外是使用 <=> 对两个 NULL 做比较时会返回 1,这两种情况都不需要做 ...

  2. display值的分类

    整体来讲,display的值可以分为6个大类,1个全局类,一共是7大类: 外部值 内部值 列表值 属性值 显示值 混合值 全局值 外部值,指的是这些值只会直接影响一个元素的外部表现,而不影响元素里面的 ...

  3. python判断链表是否有环

    思路:使用快慢指针,快指针每次走两步,慢指针每次走一步,如果有环,则一定会快慢指针指向同一结点: 假设环的长度为n,先让一个指针走n步,另一个再开始走,当他们指针指向同一结点时,该结点就是环入口点 ( ...

  4. 3.GoolgeProtoBuffer序列化反序列化

  5. Flutter学习五之网络请求和轮播图的实现

    上期讲到了,怎样实现一个下拉刷新和加载更多的列表,数据更新,需要使用到网络请求,在flutter中,怎样实现一个网络请求呢?官方使用的是dart io中的HttpClient发起的请求,但HttpCl ...

  6. Servlet中关于中文乱码

    一.客户端请求服务器的数据有乱码 1.get方式请求 ①修改tomcat/conf/server.xml,在<Connector> 标签中添加属性useBodyEncodingForURI ...

  7. UGOPEN实现解析NX表达式

    UGOPEN函数UF_MODL_dissect_exp_string可以解析表达式,但是当表达式存在附注信息时,会将附注信息附加在 rhs_str上,例如: 这样,当单独获取附注信息时还需要拆分字符串 ...

  8. Spring Boot 项目打成 war 包部署

    Spring Boot 一个非常方便的功能就是支持内置的 Servlet 容器,一般我们部署 Spring Boot 应用时都是打成一个可执行的 Jar 包进行部署.其实 Spring Boot 也是 ...

  9. XXE漏洞介绍 & XXE漏洞攻击 & 修复建议

    介绍XXE漏洞 XML外部实体注入(XML External Entity)简称XXE漏洞,XML用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是-种允许用户对自己的标记语 ...

  10. python3 连接数据库~

    ~目前记录的是针对python3写的数据库连接,不适用于pyhon2.python3如果想要与数据库进行连接,则需要先下载对应各数据库的插件包,然后导入包.python3的插件下载地址:https:/ ...