Home > Developer > JavaScript
A. scrollTop calculation;
B. Calculate the positioning value of the rolling element;
C. Set the rolling cycle;
The Code is as follows:
Css section:
Copy codeThe Code is as follows:
/* Test height */
Body {height: 3000px ;}
Div, ul, li, body {margin: 0; padding: 0 ;}
/* Position: absolute; used for element locating */
# Roll {width: 50px; height: 100px; background: #99CC00; position: absolute ;}
Html code:
Copy codeThe Code is as follows:
<Body>
<Div id = "roll"> </div>
</Body>
JS Code:
Copy codeThe Code is as follows:
Var roll = document. getElementById ('roll '),
InitX = 0,
InitY,
CompY,
Sp = 15,
// The time interval can be adjusted. The step value should not be too large. Otherwise, there will be a flash screen in IE;
TimeGap = 5,
Doc=document.doc umentElement,
DocBody = document. body;
CompY = initY = 200;
Roll. style. right = initX + "px ";
; (Function (){
Var curScrollTop = (doc. scrollTop | docBody. scrollTop | 0)-(doc. clientTop | docBody. clientTop | 0 );
// The value of each comP is different until roll. style. top === doc. scrollTop + initY;
CompY + = (curScrollTop + initY-compY)/sp;
Roll. style. top = Math. ceil (compY) + "px ";
SetTimeout (arguments. callee, timeGap );
})();
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
