JS实现页面侧边栏效果探究


Posted in Javascript onJanuary 08, 2021

其实效果大概是这样的:

JS实现页面侧边栏效果探究

而标题,也许是我当时看到这种效果时的真实感受。因为第一反应是:“还可以把page整体移出页面?”

发现:display动画的应用

整件事的起因是什么呢?在笔者最近为社团计划的官网上打算做一个这样的效果:点击头像,左边/右边滑出一个“面板”,里面展示用户的个人信息。

当然,这有很多种做法,比如:利用position定位+overflow溢出隐藏、利用opacity/visibility隐藏+pointer-events元素穿透… 但是笔者当时想到的是如何给”真正的隐藏,display“加上动画!

我们大概都知道的是:HTML渲染过程中有一个可能执行的、影响页面性能的“回流”和“重绘”的过程。导致这个过程被触发的原因有很多:元素位置移动、大小改变、增删节点以及这里要说的display显示与隐藏切换等等。而元素的变动需要页面快速的显示出来,所以在我们看来是“突兀”的。
而且有一点需要注意的是:浏览器是“有点智能”的 —— 它可以判断如果会触发页面回流的代码有很多,那么它会将这些代码都读取完再(合并)一起执行,所以这也是下面这段代码会有如下图效果的原因:

/** css代码 */
width: 50px;
height: 50px;
background-color: red;
display: none;
transform: translateX(0);
transition: all .6s ease; //似乎没用?
//js代码
ds.style.display="block";
ds.style.transform="translateX(100px)";

JS实现页面侧边栏效果探究

但是同样的,当对以下属性进行操作的时候,由于浏览器的渲染机制有一些API可以使页面强制渲染(因为要获得详细确切的信息),包括:offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。这会直接导致前后两行相当于“渲染了两遍”。

所以将上方js代码改为下面这样:

//js代码
ds.style.display="block";
ds.offsetHeight;
ds.style.transform="translateX(100px)";

就可以了

JS实现页面侧边栏效果探究
目前csdn官网PC端blink发布页面的图片上传就用了类似这个功能!

后来还是觉得这种方式需要涉及js对页面结构的改变,于是乎…

实现:如何实现文首展示的效果

这基于position定位是会“重合”的:在两个行内元素都设置了定位属性(但没有加top/left/bottom/right定位)后,后面的会覆盖前面的;这时候可以通过margin移动位置展示

只能是行内元素,行内块元素都不行。 ——云小梦

它大概结构是这样的:

<div class="page_list">
	<div class="z_two_page">
		<!-- 这里放右侧弹框展示的信息 -->
	</div>
	<div class="box">
		<!-- "页面"的遮罩层 -->
		<div class="zb_mask"></div>
		<!-- 这里放“页面”数据结构(也就是原本应该在body标签下的所有东西) -->
	</div>
	<!-- 这是占位元素 -->
	<div class="space"></div>
</div>

实际就像这样的:

<div class="page_list">
	<div class="z_two_page">哈哈哈</div>
	<div class="box">
		<div class="zb_mask"></div>
		
		<div id="boxs">
		 <div class="left" style="background-color:#ffc5c5;"></div>
		 <div class="right" style="background-color:#7171f7;">
			 flex下两列布局左边固定右边宽高自适应
		 </div>
		</div>
		<div class="color"></div>
		<a href="#" rel="external nofollow" class="a">千万小心像对a设置全局样式(这叫啥样式重置)</a>
		<div class="center">
			<div class="ds"></div>
			<button class="but">到指定地点</button>
		</div>
		<form id="form" action="#">
			<input type="submit" value="="踢脚板 />
		</form>
		<img id="img" src="compress/compress/img/mxc_16x16.png" />
	</div>
	
	<div class="space"></div>
</div>

如上,class为“box”的div里面放的就是“原本的页面整体”部分。为了达到想要的效果,我们采用了flex布局!

flex简写时包括三个属性:flex-grow、flex-shrink和flex-basis ——

  • flex-grow:指定了容器剩余空间多余时候的分配规则,默认值是0,多余空间不分配;
  • flex-shrink:指定了容器剩余空间不足时候的分配规则,默认值是1,空间不足要分配;
  • flex-basis:flex-basis则是指定了固定的分配数量,默认值是auto。

设置的同时需设置width或者height属性;

/* 列表仅水平滚动 */
.page_list { width: 100vw; display: flex; overflow-y: hidden; }
/* 主内容宽度100%,白色背景覆盖 */
.box { flex: 0 0 100vw; height: 100%; background-color: #fff; position: relative; overflow-y: auto;overflow-x: hidden;transition: all .6s ease; }
/** 遮罩层样式 */
.zb_mask{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	background-color: rgba(0,0,0,.2);
	pointer-events: none;
	opacity: 0;
	transition: all .6s ease;
}
/* 空标签元素,作用是腾出水平滚动空间 */
.space { flex: 0 0 12rem; }
/* 按钮固定定位,藏在内容白色背景后面 */
.z_two_page { width: 12rem; position: fixed; right: 0; top: 0; }

大概就是:什么也不干的情况下只展示box的内容(也就是和不加这些花里胡哨的div一样的效果),它是用background覆盖后面的class为“space”的占位元素;在”哈哈哈“展示的时候,box右移。

这里需要注意的是:为什么“哈哈哈”所属div在前而“页面”所属div在后?
因为根据前面所说,这里采用的是position覆盖,它的规则就是“后面的覆盖前面的”,所以如果采用这种布局方式,那么一开始被隐藏的元素就要放在前面。

代码中flex的前两个属性值为0,表示在空间增大或缩小时依然保持原状(这是本文的基础!),第三个元素则写了展示时的“默认大小”:如你所看,box承载的是页面,所以它是100vw,而class为“z_two_page”的元素这里设置了12rem ,你完全可以将这个值换掉!

那如何将“哈哈哈”展示在视野中? —— js控制“代表页面的元素”整体移动即可。

这里有个“遮罩层效果”,按照传统的js实现肯定就要去找display了,再进一步可以用上面所说的“display动画效果”增强体验。
但是本文上面css代码中加了 pointer-events 属性:元素是否穿透;设置为none时就可以不用在意对应元素是否存在了(从事件上看此时有和没有一样了),也就不用控制display什么的,大大增强性能了有木有!

let right=document.querySelector(".right");
let box=document.querySelector(".box");
let mask=document.querySelector(".zb_mask");
right.onclick=function(){
 box.style.marginLeft="-12rem";
 mask.style.cssText+="opacity: 1;pointer-events: all;"
}
mask.onclick=function(){
 box.style.marginLeft="0";
 mask.style.cssText+="opacity: 0;pointer-events: none;"
}

最后,考虑到移动端页面展示的一些问题,比如:右侧留白问题、原生手势对页面整体的影响等,我们一般会在css中设置 html{max-width: 100vw;overflow-x: hidden;} 。如果你想要用户在移动端依然只能够通过点击弹出侧边栏,在这里我们可以在css中加上限制 —— 设置上方功能只有在PC端生效:

@media (any-hover: none) {
	.page_list{
		overflow-x: hidden;
	}
}

到此这篇关于JS实现页面侧边栏效果探究的文章就介绍到这了,更多相关js页面侧边栏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
js判断两个数组相等的5种方法
May 06 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 #Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 #Vue.js
详解Typescript里的This的使用方法
Jan 08 #Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 #Javascript
vue编写简单的购物车功能
Jan 08 #Vue.js
three.js中多线程的使用及性能测试详解
Jan 07 #Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 #Vue.js
You might like
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
微信小程序入门教程
2016/11/18 Javascript
原生js轮播特效
2017/05/18 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
python实现音乐下载器
2018/04/15 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
客服服务心得体会
2013/12/30 职场文书
学校捐书活动总结
2015/05/08 职场文书
员工手册编写范本
2015/05/14 职场文书
事业单位岗位说明书
2015/10/08 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL