Developing Own gui Controls

I'm developing a gui for a game,then,i need to handle everything,from events to draw the controls,its pretty hard.

i have a logical problem,above i will explain what is my question,with a help from a image:

I want to make this scrollable area,but i dont know how.

I have two functions to draw the Skins(BackGround Area) and the Sprites(items in the image开发者_如何学JAVA):

procedure DrawSprite(LeftOffSet, TopOffSet, Size, ItemId, ItemData1, ItemData2, EdgeR, EdgeG, EdgeB, ClipLeftOffSet, ClipTopOffSet, ClipWidth, clipHeight, TextFont, TextR, TextG, TextB, TextAlign, TextForce: Integer);
procedure DrawSkin(LeftOffSet, TopOffSet, Width, Height, SkinId, ClipLeftOffSet, ClipTopOffSet:integer);

WIth Clips parameters,i can control what percentage of skin/sprite i want to draw,but,i dont know how to design it from every control.

I searched a lot on internet,but,i just found about how to do make scrollbars,but not how to deal with scrollable area.

Have an overlay image hiding the tops and bottoms of the images when you scroll. Your math just got a whole lot easier.