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>
教程到此结束,希望可以帮到你们
css和js实现硬件加速渲染自定义滚动条的更多相关文章
- Chromium硬件加速渲染的UI合成过程分析
在Chromium中.Render端和WebGL端绘制出来的UI终于是通过Browser端显示在屏幕上的.换句话说.就是Browser端负责合成Render端和WebGL端的UI.这涉及到不同Open ...
- CSS动画原理及硬件加速
一.图层 图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的<CSS层叠上下文和层叠顺序>,这里我们简单复习一下产生层叠上下文的原因. 1.根层叠上下文 指的是页面根元素 ...
- 模仿yui将css和js打包,加速网页速度
如果你有机会用firebug看看自己网站的网络请求,你会发现请求数量之多超乎你的想象.为减少这个数量,有许多技术方案.比如yui的combo,会将所有需要的js混合成一个文件下载,现代web服务器好像 ...
- js拖拽案例、自定义滚动条
简单实例: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...
- css实现硬件加速
原文请点击一下链接: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-c ...
- CSS开启硬件加速 hardware accelerated
作者:孙志勇 微博 日期:2016年12月6日 一.时效性 所有信息都具有时效性.文章的价值,往往跟时间有很大关联.特别是技术类文章,请注意本文创建时间,如果本文过于久远,请读者酌情考量,莫要浪费时间 ...
- 后端自动构建前端css和js
引子: 别的复杂前端开发技术不会,用得多的还是手写代码,手动处理. 3年前手写合并压缩js和css文件的asp脚本代码目前还能正常运行,也就没有多大使用别的技术的动力. 直到近期被一个问题纠结着,今天 ...
- 今天写了一个SSM小项目,运行之后,前端页面的CSS、js样式显示不出来,具体操作如下:
因为SSM中我们设置了拦截器,拦截器会拦截CSS和JS,所有样式渲染不出来,在Web.xml中写上 1 <servlet-mapping> 2 <servlet-name>de ...
- 使用CSS3开启GPU硬件加速提升网站动画渲染性能
遇到的问题: 网站本身设计初衷就没有打算支持IE8及以下版本浏览器,并不是因为代码兼容性问题,而是真的不想迁就那些懒得更新自己操作系统和浏览器的用户,毕竟是我自己的网站,所以我说了算!哈哈~ 没有了低 ...
随机推荐
- node进阶| 解决表单enctype="multipart/form-data" 时获取不到Input值的问题
今天在学习node踩到一个坑:form设置enctype="multipart/form-data"上传文件时,无法获取到表单其他input的值. 因为之前上传文件用的是 form ...
- 关于Java的编译执行与解释执行
编程语言分为低级语言和高级语言,机器语言.汇编语言是低级语言,C.C++.java.python等是高级语言. 机器语言是最底层的语言,能够直接执行.而我们编写的源代码是人类语言, 计算机只能识别某些 ...
- Hadoop学习笔记(一):ubuntu虚拟机下的hadoop伪分布式集群搭建
hadoop百度百科:https://baike.baidu.com/item/Hadoop/3526507?fr=aladdin hadoop官网:http://hadoop.apache.org/ ...
- 【vue】---- 新版脚手架搭建项目流程详解
一.概述 本文将介绍vue项目完整的搭建流程,在使用新版本的脚手架基础上,进行了一系列的完善和配置.主要内容如下: 1.项目初始化 安装脚手架 创建项目 项目结构 2.项目搭建配置 引入第三方插件 路 ...
- Java Web学习(四)http协议
文章更新时间:2020/07/24 一.概念 定义 HTTP:超文本传输协议,是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的过程. HTTP协议:用于定义客户端与 ...
- hystrix ,feign,ribbon的超时时间配置,以及原理分析
背景,网上看到很多关于hystrix的配置都是没生效的,如: 一.先看测试环境搭建: order 服务通过feign 的方式调用了product 服务的getProductInfo 接口 //---- ...
- const pointers
1 指针 p对应的地址是常量,但是里面存放的data不是常量 2 地址里存放的data是常量,但是地址不是常量 3 地址和指针都是常量
- VS调试时查看动态数组的全部元素
转载:https://blog.csdn.net/sinat_36219858/article/details/80720527
- Spring Boot入门系列(二十)快速打造Restful API 接口
spring boot入门系列文章已经写到第二十篇,前面我们讲了spring boot的基础入门的内容,也介绍了spring boot 整合mybatis,整合redis.整合Thymeleaf 模板 ...
- Spring IOC 容器预启动流程源码探析
Spring IOC 容器预启动流程源码探析 在应用程序中,一般是通过创建ClassPathXmlApplicationContext或AnnotationConfigApplicationConte ...