动态网站制作之滚动条制作原理

动态网站制作之滚动条制作原理

    在任何一个带有特定功能的组件背后，都有一些最简单的工作原理。滚动条也不例外，只要掌握其工作原理，制作就将变的易如反掌。今天，济南网站公司特邀请网站制作金牌程序员为大家讲解滚动条制作原理。
    滚动条的使用频率很高，其功能已经无需解释。我们需要了解的是滚动条工作的数学原理。在此，我们将滚动条分为两个区域：一个是显示区域，另外一个区域是滑块区域，在滑块区域中含有滑块，也可能包括滑块轨道等元件，它的主要功能是控制内容的滚动。
    我们以纵向滚动条为例，在滚动条中，用户拖拽滑块，滑块将在滑块区域内移动，而不会超出该区域。当滑块被移动到区域顶部时，显示区域中将显示滚动内容的顶部；当滑块被移动到区域底部时，显示区域中将显示滚动内容的底部。
    那么，滑块从最顶部滑动到最底部，它总共能够移动的距离是多少呢？又能可能会认为该距离等于滑块区域的高度。其实这是错误的，只要稍加计算，我们可以认识到该距离应该等于滑块区域的高度减去滑块的高度。
    而同样的问题，当显示区域的滚动内容从最顶部滑动到最底部时，滚动内容移动了多少距离呢？我们知道，滚动内容向上滚动的极限是当滚动内容的底部刚好显示在显示区域时，如果以显示区域的左上角作为原点，此时滚动内容的y位置应该等于显示区域的高度减去滚动内容的高度。因此，反之我们可以得到，滚动内容移动的距离应该等于滚动内容的高度减去显示区域的高度。
    济南网站公司可以得到的公式即为：滑块y位置/滚动内容y位置=（滑块区域高度-滑块高度）/（显示区域高度-滚动内容高度）