# Horizontal scrollbar in liquid layout

**URL:** <https://forum.kirupa.com/t/horizontal-scrollbar-in-liquid-layout/312701>\
**Category:** Uncategorized\
**Created:** [August 10, 2010, 10:13pm UTC](https://forum.kirupa.com/t/horizontal-scrollbar-in-liquid-layout/312701 "2010-08-10T22:13:40Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![danicarrete](https://avatars.discourse-cdn.com/v4/letter/d/898d66/32.png) [@danicarrete](https://forum.kirupa.com/u/danicarrete)\
**Post date:** [August 10, 2010, 10:13pm UTC](https://forum.kirupa.com/t/horizontal-scrollbar-in-liquid-layout/312701/1 "2010-08-10T22:13:40Z")

</div>

hi! 🙂  
I tried and I tried, but I cant figure this out.  
I have this horizontal scrollbar on the website I’m building. Here: [http://www.6design.com.br/2010/sitedesenho.html](http://www.6design.com.br/2010/sitedesenho.html) (click on TRABALHOS, then click on the first rectangle on the left)  
Since it’s a liquid layout, when I resize the browser window, all the content adapts to it. But I can’t make this scrollbar work properly! When I resize the window from a bigger size to a smaller one, the bar on the scrollbar doesnt allow me to see the hole scrolled content.

Here’s my code (AS2:

barekin.useHandCursor = draggerekin.useHandCursor=false;  
space = 20;  
friction = 0.9;  
speed = 4;  
x = draggerekin.\_x;  
top = mainekin.\_x;  
bottom = mainekin.\_x+maskekin.\_width-mainekin.\_width-space;  
draggerekin.onPress = function() {  
drag = true;  
this.startDrag(false, this.\_parent.x, this.\_y, this.\_parent.x+this.\_parent.barekin.\_width-this.\_width, this.\_y);  
draggerekin.scrollEase();  
};  
draggerekin.onMouseUp = function() {  
this.stopDrag();  
drag = false;  
};  
barekin.onPress = function() {  
drag = true;  
if (this.\_parent.\_xmouse\>this.\_x+this.\_width-this.\_parent.draggerekin.\_width) {  
this.\_parent.draggerekin.\_x = this.\_parent.\_xmouse;  
this.\_parent.draggerekin.\_x = this.\_x+this.\_width-this.\_parent.draggerekin.\_width;  
} else {  
this.\_parent.draggerekin.\_x = this.\_parent.\_xmouse;  
}  
draggerekin.scrollEase();  
};  
barekin.onMouseUp = function() {  
drag = false;  
};  
movedraggerekin = function (d) {  
if ((draggerekin.\_x\>=x+barekin.\_width-draggerekin.\_width && d == 1) || (draggerekin.\_x\<=x && d == -1)) {  
clearInterval(myInterval);  
} else {  
draggerekin.\_x += d;  
draggerekin.scrollEase();  
updateAfterEvent();  
}  
};  
up\_btn.onPress = function() {  
myInterval = setInterval(moveDragger, 100, -1);  
};  
down\_btn.onPress = function() {  
myInterval = setInterval(moveDragger, 100, 1);  
};  
up\_btn.onMouseUp = down\_btn.onMouseUp=function () {  
clearInterval(myInterval);  
};  
MovieClip.prototype.scrollEase = function() {  
this.onEnterFrame = function() {  
if (Math.abs(dx) == 0 && drag == false) {  
delete this.onEnterFrame;  
}  
r = (this.\_x-x)/(barekin.\_width-this.\_width);  
dx = Math.round((((top-(top-bottom)\*r)-mainekin.\_x)/speed)\*friction);  
mainekin.\_x += dx;  
};  
};

I guess this is an easy question, but I’m a nwebie on actionscript, so I could use a little help from you guys.

Could someone give me a hand? Please?

Thanks a lot :yoshi: