超酷滚动公式实现自定义滚动条

核心提示： content_position = top_scroll - (percent_scrolled * scrollable)top_scroll在上图中我们看到的两条红线的交点就是场景的原点(0,0)，那么这里的topscroll就是滚动内容的初始位置，超酷滚动公式实现自定义滚动条(4)

content_position = top_scroll - (percent_scrolled * scrollable)

top_scroll

在上图中我们看到的两条红线的交点就是场景的原点(0,0)，那么这里的topscroll就是滚动内容的初始位置，换句话说就是可视区域的位置。如果可视区域在原点位置，那么这个topscroll就是0。

Percent_scrolled

滚动百分比，这个百分比是指在滚动条上dragger所在滚条上位置的百分比，那么如果想求出它的百分比位置是不难的。

Percent_scrolled = (dragger._y-btnup._height)/(scrollbg._height-dragger._height);

Scrollable

可滚动的区域，是指除了用遮罩遮住的区域之外的区域，那么计算出它也很容易。

Scrollable = contentMain._height –maskedView._heigh

也就是使用滚动内容的高度减去遮罩的高度即可。

公式中的各个值已经计算出来了，那么也就得出了conten_position的位置，它实际上就是用滚动条的百分比换算成可滚动区域的位置的百分比，如果现在你理解了这个公式，那其他的工作就简单了，你只要会更新content_position的位置，就已经会制作自定义的滚动条了。

那么下面就开始着手制作这个滚动条。

范例13 演示文件

（1）新建一个Flash文档。将其命名为scrollbar.fla。

（2）在主场景中分别创建上下按钮、滚动条背景、滚动内容的MovieClip和遮罩，如下图所示布局。

在主场景中层的布局如下。