其实这个效果不是什么难实现的效果,关键注意几个地方就可以了;

a.scrollTop的计算;

b.滚动元素的定位值计算;

c.滚动周期设定;

代码如下:

css部分:

/*测试用的高度*/
body{ height:3000px;}
div,ul,li,body{margin:0; padding:0;}
/*position:absolute;用于元素的定位*/
#roll{width:50px; height:100px; background:#99CC00; position:absolute;}

Html代码:

<body>
<div ></div>
</body>

JS代码:

var roll=document.getElementById('roll'),
	initX=0,
	initY,
	compY,
	sp=15,
	//可调整时间间隔,步进值不宜过大,不然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);
//每次comP的值都不一样;直到roll.style.top===doc.scrollTop+initY;
compY+=(curScrollTop+initY-compY)/sp;
roll.style.top=Math.ceil(compY)+"px";
setTimeout(arguments.callee,timeGap);
})();

相关文章:

  • 2021-12-01
  • 2022-12-23
  • 2022-12-23
  • 2021-12-29
  • 2021-11-07
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-09-08
  • 2022-12-23
  • 2019-05-31
  • 2022-12-23
  • 2021-08-11
相关资源
相似解决方案