Home >Web Front-end >JS Tutorial >How to solve the anti-shake problem and suspended couplets in JavaScript motion framework (2)
This article mainly introduces the second part of JavaScriptMotionFramework in detail to solve the problem of anti-shake and suspended couplets. It has certain reference value and is of interest. Friends can refer to
The example in this article is the application of JavaScript motion framework (1)
scrollTop:Sometimes the web page is very Long, its height is greater than the height of the monitor, which will cause scrolling. Then in the height direction, the part that "rolls away" is scrollTop
var scrollTop = document.documentElement.scrollTop | | document.body.scrollTop;
offsetTop：Thisattributecan get the closest distance to the top outer edge of the element Position the distance from the inner wall of the parent element. If positioning is not used in the parent element, the distance between the upper outer edge and the inner wall of the document is obtained. The so-called positioning means that the position attribute value is relative, absolute or fixed.
document.documentElement.scrollHeight;
The green box is the currently visible part of the client area (excluding toolbars, But we want its mobility to finally settle at the target position:1: The position can be calculated directly and hard assigned; 2: Buffer movement To the target position, the effect is softer.
Generally, the first method is not used because the visual effect is very poor and very stiff.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运动框架（二）</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#p1 {
width: 100px;
height: 200px;
background: orange;
position: absolute;
right: 0;
}
</style>
</head>
<body style="height: 30000000px;">
<p id="p1"></p>
<script type="text/javascript">
var op = document.getElementById('p1');
var timer = null;
window.onscroll = function() {
//每次滚动网页，都要重新计算目标值，当前值就是offsetTop
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var target = (document.documentElement.clientHeight - op.offsetHeight)/2 + scrollTop;
//下面是硬赋值,计算好位置后，直接将值付给style.top,太生硬
//op.style.top = target;
startMove(target);
};
function startMove(iTarget) {
clearInterval(timer);
timer = setInterval(function() {
var speed = (iTarget - op.offsetTop) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (iTarget == op.offsetTop) {
clearInterval(timer);
} else {
op.style.top = op.offsetTop + speed + 'px';
document.title = iTarget + ',' + op.offsetTop;
}
}, 30);
}
</script>
</body>
</html> There is a problem with the running results. The couplet keeps shaking, up and down, that is, the offsetTop keeps changing back and forth, as shown in the following two pictures: 
speed = (267.5 - 268)/10 –> -1, go back 1px to 267, but never reach the target value of 267.5 , in the previous article, the speed could only be rounded, and the computer did not move decimal px, so it never reached 267.5. It was just like this: one step forward, passed, one step back, terrible! Shake back and forth!
How to solve it is very simple. The target value is not allowed to be a decimal: round!
var target = (document.documentElement.clientHeight - op.offsetHeight)/2 + scrollTop;
var target = parseInt((document.documentElement.clientHeight - op.offsetHeight)/2 + scrollTop);
The above is the detailed content of How to solve the anti-shake problem and suspended couplets in JavaScript motion framework (2). For more information, please follow other related articles on the PHP Chinese website!