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