听别人说用CSS的变换来实现渲染有硬件加速的效果，看到很多大网站都开始陆续使用上了，我也来说说怎么做，我这边实现的滚动条有自然滚动效果，看起来比较自然，说的再多不如直接写，让我们开始吧！
我们需要自己定义页面滚动的话，我们肯定不想让浏览器自带的滚动条出现，所以我们要先隐藏页面所有的滚动条,下面的CSS样式是兼容各个浏览器的隐藏滚动条
*::-webkit-scrollbar { width: 0 !important } /* IE 10+ */ * { -ms-overflow-style: none; } /* Firefox */ * { overflow: -moz-scrollbars-none; }滚动条隐藏起来了，我们下一步需要做的就是写页面代码
<div> <div> <!-- 你的内容 --> <!-- 内容结束 --> </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 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> <div> <!-- 你的内容 --> <!-- 内容结束 --> </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>教程到此结束，希望可以帮到你们