Research on the effect of page sidebar realized by JS

In fact, the effect is probably like this:

And the title may be my true feeling when I saw this effect. Because the first reaction is: "Can we also move the page out of the page as a whole?"

Discover: Application of display animation

What caused the whole thing? I recently planned to create an effect like this on the official website of a community project: click on the avatar, and a "panel" will slide out from the left/right, displaying the user's personal information.

Of course, there are many ways to do this, such as: using position positioning + overflow overflow hiding, using opacity/visibility hiding + pointer-events element penetration... But what I thought of at the time was how to add animation to " real hiding, display "!

What we probably all know is that during the HTML rendering process, there is a process of "reflow" and "repaint" that may be executed and affect the performance of the page. There are many reasons that cause this process to be triggered: element position movement, size change, addition and deletion of nodes, and display display and hiding switching mentioned here, etc. The changes of elements need to be displayed quickly on the page, so they seem "abrupt" to us.
And one thing to note is that the browser is "a little smart" - it can determine that if there are many codes that will trigger page reflow, it will read all of them and then (merge) them together , so this is why the following code will have the following effect:

/** CSS code */
width: 50px;
height: 50px;
background-color: red;
display: none;
transform: translateX(0);
transition: all .6s ease; //Seems useless?

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

But similarly, when operating the following properties, due to the browser's rendering mechanism, there are some APIs that can force the page to render (because detailed and accurate information is required), including: offsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight, getComputedStyle() (currentStyle in IE). This will directly result in the two lines before and after being equivalent to "rendering twice".

So change the above js code to the following:

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

That's it

Currently, the image upload on the blink release page of the csdn official website PC version uses a similar function!

Later, I felt that this method required js to change the page structure, so...

Implementation: How to achieve the effect of displaying the first line of the article

This will "overlap" based on position positioning: after positioning attributes are set for two inline elements (but top/left/bottom/right positioning is not added), the latter will cover the former; at this time, the position can be moved and displayed through margin .

It can only be an inline element, not an inline block element. ——Yun Xiaomeng

Its structure is roughly like this:

<div class="page_list">
	<div class="z_two_page">
		<!-- Here is the information displayed in the pop-up box on the right-->
	</div>
	<div class="box">
		<!-- "Page" mask -->
		<div class="zb_mask"></div>
		<!-- This is where the "page" data structure goes (that is, everything that should be under the body tag) -->
	</div>
	<!-- This is a placeholder element-->
	<div class="space"></div>
</div>

It actually looks like this:

<div class="page_list">
	<div class="z_two_page">Hahaha</div>
	<div class="box">
		<div class="zb_mask"></div>
		
		<div id="boxes">
		 <div class="left" style="background-color:#ffc5c5;"></div>
		 <div class="right" style="background-color:#7171f7;">
			 The two-column layout under flex is fixed on the left and adaptive on the right </div>
		</div>
		<div class="color"></div>
		<a href="#" rel="external nofollow" class="a">Be careful when setting global styles for a (this is called style reset)</a>
		<div class="center">
			<div class="ds"></div>
			<button class="but">Go to the designated location</button>
		</div>
		<form id="form" action="#">
			<input type="submit" value="="skirting board/>
		</form>
		<img id="img" src="compress/compress/img/mxc_16x16.png" />
	</div>
	
	<div class="space"></div>
</div>

As shown above, the div with class "box" contains the "original entire page". In order to achieve the desired effect, we use flex layout!

Flex includes three properties when abbreviated: flex-grow, flex-shrink and flex-basis——

• flex-grow: specifies the allocation rule when there is excess space in the container. The default value is 0, and the excess space is not allocated.
• flex-shrink: specifies the allocation rule when the remaining space of the container is insufficient. The default value is 1, which means that the space must be allocated when there is insufficient space.
• flex-basis: flex-basis specifies a fixed allocation amount, the default value is auto.

When setting, you need to set the width or height attribute;

/* List scrolls horizontally only */
.page_list { width: 100vw; display: flex; overflow-y: hidden; }
/* Main content width 100%, white background coverage*/
.box { flex: 0 0 100vw; height: 100%; background-color: #fff; position: relative; overflow-y: auto; overflow-x: hidden; transition: all .6s ease; }
/** Mask layer style*/
.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;
}
/* Empty label element, used to free up horizontal scrolling space*/
.space { flex: 0 0 12rem; }
/* The button is fixedly positioned and hidden behind the white background of the content*/
.z_two_page { width: 12rem; position: fixed; right: 0; top: 0; }

It means: it displays the contents of the box without doing anything (which is the same effect as without the fancy divs). It uses background to cover the placeholder element with class "space" behind it. When "hahahaha" is displayed, the box moves to the right.

What needs to be noted here is: why is the div to which "Hahaha" belongs in front and the div to which "page" belongs in the back?
Because according to what was said before, position overlay is used here, and its rule is "the back covers the front", so if this layout method is used, the elements that are hidden at the beginning should be placed in the front.

The first two flex attributes in the code have a value of 0, which means that the space will remain the same when it is increased or decreased (this is the basis of this article!), and the third element writes the "default size" when displayed: As you can see, the box hosts the page, so it is 100vw , while the element with class "z_two_page" is set 12rem here. You can completely change this value!

So how do we display “Hahahaha” in our field of vision? —— js can control the overall movement of “elements representing the page”.

There is a "mask layer effect" here. According to the traditional js implementation, you must find display. You can further use the "display animation effect" mentioned above to enhance the experience.
However, pointer-events attribute is added to the CSS code above in this article: whether the element is penetrable; when it is set to none, you don’t have to care whether the corresponding element exists (from the event point of view, it is the same whether it exists or not), and you don’t have to control the display or anything, which greatly enhances performance!

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

Finally, considering some issues with mobile page display, such as the white space on the right and the impact of native gestures on the overall page, we usually set html{max-width: 100vw;overflow-x: hidden;} in CSS. If you want users to only be able to click on the pop-up sidebar on mobile devices, we can add restrictions in CSS here - set the above function to take effect only on PC:

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

This is the end of this article on the exploration of JS page sidebar effect. For more relevant js page sidebar content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!