JavaScript motion framework solves the problem of jitter prevention, floating couplets (2), and javascript framework

JavaScript motion framework solves the problem of jitter prevention, floating couplets (2), and javascript framework

This example is an application of JavaScript motion framework (I ).

ScrollTop:Sometimes a webpage is too long, and its height is greater than the height of the monitor, which produces scroll. In the height direction, the "rolling" part is scrollTop.

Var scrollTop = document.doc umentElement. scrollTop | document. body. scrollTop;

OffsetTop:This attribute can be used to obtain the distance from the upper outer edge of an element. If the upper outer edge is not located in the parent element, the distance from the upper outer edge to the inner wall of the document is obtained. The so-called positioning is that the position attribute value is relative, absolute, or fixed.

In the figure, the Black Box is the webpage document, and its height is document.doc umentElement. scrollHeight;

The Green Box is the visible customer area (excluding tool bar and status bar), and the red box is a couplet to be fixed in the center of the customer area. If the webpage height is high, the user keeps rolling and requires the couplet to be kept in the center of the right side of the customer's area in the form of buffering (postion: fixed; can be done, and it is very stable to roll the webpage, ).

But we want to make it the final position of sports:

1: You can directly calculate the location and assign a hard value;
2: The buffer moves to the target position, and the effect is softer.
Generally, the first type of hard drive is not needed, because the visual effect is poor and hard.

<! DOCTYPE html> 
There is a problem with the running results, and the couplets are constantly jitters. The previous jitter, that is, the offsetTop constantly changes back and forth, as shown in the following two figures:



Observe the two figures above and view the title. The calculated target value is decimal: 267.5px, that is, the style that the couplet should last stay. top value, speed = (267.5-267)/10-> 1, Cross 1 px to 268,
Speed = (267.5-268)/10->-1, return 1px, to 267, never reach the target value of 267.5. in the previous article, the speed can only be rounded up, in addition, the computer does not take a decimal number of pixels, so it never reaches 267.5, so it is deadlocked: Cross-step, over, take a step back, and kill! Round-trip jitter!
It is easy to solve the problem. The target value is not allowed to be a decimal number: an integer!
Var target = (document.doc umentElement. clientHeight-oDiv. offsetHeight)/2 + scrollTop;

Changed:
Var target = parseint(document.doc umentElement. clientHeight-oDiv. offsetHeight)/2 + scrollTop );
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.