js实现垂直滚动效果

实现js的垂直滚动首先要先搞懂offsetTop和scrollTop的两个属性
offset属性介绍

http://www.cftea.com/c/2009/01/R3MW6VH4GID77IZV.asp

scroll属性介绍

http://www.codesky.net/article/201004/99238.html

从以上两篇文章中可以大致将offsetTop理解为内部边框的margin-top,而scrollTop可以理解为当外部块状元素比内部块状元素高度小后,有一部分内部元素高度被遮住,刚开始的时候外部元素的scrollTop为0(外部与内部块状元素的上边界大致重叠),当我们用滚动条拖动内部元素的时候,内部元素的上边界会超出外部元素的上边界,多出来的部分就是scrollTop


实现垂直滚动的思路

1:设置一个外部块状元素 (id=demo)以及2个内部块状元素(demo1,demo2),外部块状元素高度比内部块状元素高度小(根据自己需要)。

2:外部元素块的offsetTop初始值为0 ,当内部元素的offset-1(内部块状元素往上移,因为外部本事比内部高度小).所以外部的scrollTop就变成了1.

3:仔细想想当我们的内部元素的不断的往上移的过程中,总会发生所有内部块状元素都移到外部块状元素的边界(也就是内部块状元素的下边界高于外部块状元素的下边界)。这时候我们要重新设置外部块状元素的scrollTop,将scrollTop的值重新设置为0即可(也可以根据自己需要来做调整)


以下是实现的代码



	垂直滚动特效


0
 






你可能感兴趣的:(javaScript,js垂直,js垂直特效,js垂直效果)