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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.