css和js实现硬件加速渲染自定义滚动条

听别人说用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>

教程到此结束，希望可以帮到你们

2020-10-22 10:11 LRolinx 阅读(389) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

Loading

LRolinx

css和js实现硬件加速渲染自定义滚动条

公告

搜索

常用链接

我的标签

随笔档案

阅读排行榜

推荐排行榜

	*::-webkit-scrollbar {
	width: 0 !important
	}

	/* IE 10+ */
	* {
	-ms-overflow-style: none;
	}

	/* Firefox */
	* {
	overflow: -moz-scrollbars-none;
	}

	<div class="scrollBox">
	<div class="scrollContent">
	<!-- 你的内容 -->



	<!-- 内容结束 -->
	</div>
	</div>

	.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;
	}

	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>