js实现垂直滚动效果

最新推荐文章于 2022-12-03 08:26:11 发布

czk_love_wyq

最新推荐文章于 2022-12-03 08:26:11 发布

阅读量2.8k

点赞数

分类专栏： javaScript js垂直 js垂直特效 js垂直效果

本文链接：https://blog.csdn.net/czk_love_wyq/article/details/43405823

版权

本文介绍了如何使用JavaScript实现垂直滚动效果。通过理解offsetTop和scrollTop的含义，结合外部和内部块状元素的高度关系，设置适当的 scrollTop 值，可以实现内部元素的垂直滚动。文章提供了一个实现垂直滚动的思路，包括创建外部和内部块状元素，以及在内部元素滚动过程中更新外部元素的scrollTop值，确保滚动的平滑进行。

摘要由CSDN通过智能技术生成

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">实现js的垂直滚动首先要先搞懂offsetTop和scrollTop的两个属性</span>

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">offset属性介绍</span>

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)，外部块状元素高度比内部块状元素高度小（根据自己需要）。