# How to ensure scrollbar targets scrollbar?

**URL:** <https://forum.kirupa.com/t/how-to-ensure-scrollbar-targets-scrollbar/298943>\
**Category:** flash\
**Created:** [October 27, 2009, 3:06pm UTC](https://forum.kirupa.com/t/how-to-ensure-scrollbar-targets-scrollbar/298943 "2009-10-27T15:06:09Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![stephsh](https://avatars.discourse-cdn.com/v4/letter/s/49beb7/32.png) [@stephsh](https://forum.kirupa.com/u/stephsh)\
**Post date:** [October 27, 2009, 3:06pm UTC](https://forum.kirupa.com/t/how-to-ensure-scrollbar-targets-scrollbar/298943/1 "2009-10-27T15:06:09Z")

</div>

Hi,

I have created a horizontal scrollbar and would like it to target my already existing sprite of dynamic images (Class Coverflow). For some strange strange reason when I use the code below, my stage displays my dynamic set of images inside a white container with a scrollbar attached. Interaction with the set of images has been limited and my scrollbar scrolls up and down without anything happen to the images inside the container.

```php

package {  
 
   import fl.containers.ScrollPane;  
    import fl.events.ScrollEvent;  
    import fl.controls.ScrollBarDirection; 
    import flash.display.Sprite; 
 import fl.controls.ScrollBarDirection;
    public class ScrollPaneExample extends Sprite
    { 
  private var sb: ScrollPane = new ScrollPane();
  private var myCovers: CoverFlow;     
 
        public function ScrollPaneExample(covers: CoverFlow): void 
        { 
            myCovers = covers;
            createScrollPane();
  }
 
  private function createScrollPane() : void
  {
           sb = new ScrollPane();
 
   // _______________________________________________________________________________________ Scrollbar properties
 
   sb.source = myCovers; 
   sb.verticalScrollPolicy = "false";
// sb.horizontalScrollBar = "true"; // RETURNS AN ERROR! But already covered below
   sb.horizontalLineScrollSize = 120; 
   sb.scrollDrag = true;
   sb.move(14, 35);
// sb.direction = ScrollBarDirection.HORIZONTAL; // RETURNS AN ERROR!But already covered below
   sb.width = 378; // Length of scrollbar // 978
   sb.height = 286; // Height of scrollbar //26
// sb.scaleY = 300; // Doesnt work //300
             addChild(sb);
 
   sb.refreshPane()
        }
 
        public function scrollHandler(event:ScrollEvent): void  
        {  
               switch (event.direction)  
            {  
                case ScrollBarDirection.HORIZONTAL:  
                    // Turn on to make sure that the scrollbar is on even when there is no content. 
                    trace("horizontal scroll", event.position, "on", event.currentTarget.maxHorizontalScrollPosition);  
                       break;  
                 case ScrollBarDirection.VERTICAL:  
                    trace("vertical scroll", event.position, "off", event.currentTarget.maxVerticalScrollPosition);  
                    break;  
            }  
        }   
    } 
}
 

```

My CoverFlow class looks like this:

```php

public class CoverFlow extends Sprite {
  public var covers : Vector.<DisplayObject>;
  private var coverRotationY : Number = 60;
  // Original distance between covers was 200
  private var coverDistance : Number = 150;
  // Original zoom on images in background
  private var coverZ : Number = 250; //Not much difference compared to original 300
  // Original zoom on selected image in foreground (value 0 = original pix)
  private var selectedCoverZ : Number = .0;
  private var tweenDuration : Number = .6;
  private var easing : Function = Strong.easeOut;
  public function CoverFlow(covers : Vector.<DisplayObject>)
  {
   this.covers = covers;
   create();
   show(2);
   addEventListener(MouseEvent.CLICK, onClick);
  }
 
 
  // ____________________________________________________________________________ Create CoverFlow
 
  private function create(): void
  {
   for(var i : Number = 0; i < covers.length; i++)
   {
    var cover : DisplayObject = covers*;    
    cover.rotationY = coverRotationY;
    cover.x = i * coverDistance;
// cover.height = 100; //TRY
    addChildAt(cover, 0);
   }
  }
 
 
  // ____________________________________________________________________________ CoverFlow Tweening
 
  private function show(id : uint) : void // e : Event
  { 
   for (var i : Number = 0;i < covers.length; i++) 
   {
 
    var cover : DisplayObject = covers*;
 
    // Tried putting if i == id as last statment to stop website coming up automatically but it still does since it then loops through again.
 
    if (i < id) 
    {
     setChildIndex(cover, i);
     TweenLite.to(cover, tweenDuration, {x: (id - i + 1) * -coverDistance, z: coverZ, rotationY: -coverRotationY, ease:easing });
    } else if (i > id) 
    {
     setChildIndex(cover, covers.length - 1 - i);
     TweenLite.to(cover, tweenDuration, {x: ((i - id + 1) * coverDistance), z: coverZ, rotationY: coverRotationY, ease:easing }); 
    } else if(i == id)
    { 
     setChildIndex(cover, covers.length - 1);
     TweenLite.to(cover, tweenDuration, {x: 0, z: selectedCoverZ, rotationY: 0, ease:easing });
    }
   }
  }
(...)
 

```