将滚动条滚动到内容滚动 - AS3

Question

如果这有点令人困惑，我很难理解，但我会尽我所能解释它。

基本上，我创建了一个滚动页面，允许您拥有超出舞台并向上或向下滑动以查看它的内容。

在这种情况下，一个movieclip阶段掩模下一个对象（比阶段更高）和滑动向上/向下的大小影响的对象y位置，显露更多。

我被困在的部分是获得侧面的“滚动条”对象，以匹配溢出对象的顶部和底部的位置;由于滚动条必须停留在舞台上，当到达对象的底部时，由于滚动条以相同的速度移动，所以滚动条最终脱离舞台，所以在这种情况下，滚动条需要移动速度较慢，以便在另一个对象位于底部。

它的编码，现在我只能似乎通过

scrollbar.y = (e.target.y + barY); 

要匹配与

scrollbar.y = (e.target.y - barY); 

对面达到顶峰，但是我似乎无法同时实现的方式。

我在AS3（flash CC）中编写了这个代码，移动版是我想要的发布平台，我将附上我的代码以及下面的一些截图。

var ease:int = 6; 
var targY:int = dragMe.y; 
var barY:int = scrollbar.y; 

var drag:Boolean = false; 
var pos:Number = 0; 

var minY:Number = 0 + dragMe.height/2; // how low the top can go 
var maxY:Number = stage.stageHeight - dragMe.height/2; // how high the bottom can go 

var barMax:Number = 0 + scrollbar.height; // how high the bar can go 
var barMin:Number = stage.stageHeight - scrollbar.height; // how low the bar can go 

dragMe.mask = mcMask; 
mcMask.visible = false; 

dragMe.addEventListener(Event.ENTER_FRAME, dragging); 
dragMe.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown); 
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp); 

function dragging(e:Event):void { 
    if (drag) { 
     targY = mouseY + pos; 
    } 
    // restrict scrolling to stage 
    targY = Math.min(targY, minY); // how low the top can go 
    targY = Math.max(targY, maxY); // how high the bottom can go 

    barY = Math.min(barY, barMin); // how low the bar can go 
    barY = Math.max(barY, barMax); // how high the bar can go 

    // Movement of the text 
    e.target.y += (targY - e.currentTarget.y)/ease; 
    // Movement of the bar 
    scrollbar.y = (e.target.y - barY); 

} 

function mouseUp(e:MouseEvent):void { 
    drag = false; 
} 

function mouseDown(e:MouseEvent):void { 
    pos = e.currentTarget.y - mouseY; 
    drag = true; 
} 

任何帮助将是大大感谢！

灰色=阶段 黑色=外面阶段

好： http://i.stack.imgur.com/qvAoz.png

坏： http://i.stack.imgur.com/FvHIm.png

Answer 1

我卡上收到 “滚动条” 的部分对象上该边与溢流物体的顶部和底部的位置相匹配;

那么，没有必要让滚动条对象匹配溢出对象的位置，你应该将它绑定到masker对象的坐标。顺便说一句，我通常收集IDE中的所有UI元素，然后解析它们。例如，如果我需要添加一个滚动条，我只需要三个元素：

1. 容器 - 所有内容都将被正确添加;
2. 掩码
3. 滚动条动画片段，它由两个MC组成：bg和一个栏。

在这种情况下，我不需要将这些元素放在代码中，而只需调用一个函数来处理这些元素。代码本身很简单。您知道遮罩的高度，容器的高度和位置，以及滚动条背景的高度和条的当前位置。所有你需要的是处理事件并作出相应的反应。

E.g.如果您使用滚动条滚动，只需翻译栏的当前坐标并更新容器的位置。如果您要拖动内容，请相应地更新酒吧的位置。

此外，还有一个更好的方法来拖动滑块：

private static function drag(e:MouseEvent):void 
{ 
    var myBounds:Rectangle = new Rectangle(bar.x, 0, 0, barBg.height-bar.height+8); 
    bar.startDrag(false, myBounds); 
    bar.addEventListener(Event.ENTER_FRAME, update); 
} 

static private function stopdrag(e:*):void 
    { 
     bar.stopDrag(); 
     update(null); 
     bar.removeEventListener(Event.ENTER_FRAME, update); 

    } 

    static private function update(e:Event):void 
    { 
     var scroll_run_length:Number = barBg.height - bar.height + 8; 
     var modificator:Number = (content.height-masker.height)/scroll_run_length; 
     content.y = startContY -(bar.y * modificator); 

    }