a.ScrollTop calculation;
b. Calculation of positioning value of scroll element;
c. Scroll cycle setting;
The code is as follows:
css part:
/*Height for testing*/
body{ height:3000px;}
div ,ul,li,body{margin:0; padding:0;}
/*position:absolute; used for positioning elements*/
#roll{width:50px; height:100px; background:#99CC00 ; position:absolute;}
Html code:
JS code:
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 the screen will flicker under IE;
timeGap =5,
doc=document.documentElement,
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 compP is different every time ; Until roll.style.top===doc.scrollTop initY;
compY =(curScrollTop initY-compY)/sp;
roll.style.top=Math.ceil(compY) "px";
setTimeout(arguments.callee,timeGap);
})();
Statement:The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn