GMS 2.3+ Scrollbar problem


Kazan Games
I've been trying to understand how to make a scrollbar for a few hours, I managed to make it work by dragging with the mouse, but there is a problem, a part is left out:

My goal is to return a value between 0 and 1.
I did it, but it goes over the limit, and no, it’s not just subtracting the size of the scroll bar, because if I do that, it "unsets" the top of the scroll.

See my code:


mdy = 0;
scrollbar_y = 0;
scrollbar_pos = 0;
scrollbar_drag = false;


// draw rectangle area
axx = 40;
ayy = 40;
aww = 200;
ahh = 440;
draw_rectangle(axx, ayy, aww, ahh, true);

// scrollbar
xx = aww + 8; //scrollbar x
yy = ayy + 0;  //scrollbar y
ww = aww + 20;  //scrollbar area width (not relative)
hh = ahh - 0;  //scrollbar area height (not relative)
hhr = hh - yy; //scrollbar area height (relative, like the height of surface_create() for example...)

scroll_h = 32; //scrollbar height

// draw scrollbar area
draw_rectangle(xx, yy, ww, hh, true);

// enable drag
if point_in_rectangle(mouse_x, mouse_y, xx, yy+scrollbar_y, ww, yy+scrollbar_y+scroll_h)
    if mouse_check_button(mb_left) scrollbar_drag = true;

// scroll
if (scrollbar_drag)
    // drag
    scrollbar_y = mouse_y + mdy;
    if (!mouse_check_button(mb_left))
        scrollbar_drag = false;
    mdy = scrollbar_y - mouse_y;

// clamp scroll y
scrollbar_y = clamp(scrollbar_y, 0, yy + hhr - yy);

// get percentage  <<<<<<<<<<<<<<<<< PROBLEM HERE
scrollbar_yp = (scrollbar_y);
scrollbar_pos = median(0, 1, scrollbar_yp / hhr);

// draw scrollbar
draw_rectangle(xx, yy+scrollbar_y, ww, yy+scrollbar_y+scroll_h, false);

// return value
draw_text(400, 50, string("scrollbar_y: ") +string(scrollbar_y));
draw_text(400, 70, string("scrollbar_yp: ") +string(scrollbar_yp));
draw_text(400, 90, string("scrollbar_pos: ") +string(scrollbar_pos));

draw_text(400, 150, string("xx: ") +string(xx));
draw_text(400, 170, string("yy: ") +string(yy));
draw_text(400, 190, string("ww: ") +string(ww));
draw_text(400, 210, string("hh: ") +string(hh));
draw_text(400, 230, string("hhr: ") +string(hhr));
draw_text(400, 250, string("mdy: ") +string(mdy));

draw_text(400, 280, string("mouse_y_distance_from_yy: ") +string(mouse_y - yy));

I can put this in the code:
scrollbar_y = clamp(scrollbar_y, 0, yy + hhr - yy - scroll_h);

This will correct the position of the scrollbar, but the percentage will be incorrect.

If what I'm doing is wrong, can you tell me another way to make a scrollbar that works that way?
Can someone help me? Thank you.


Kazan Games
You need to use

to calculate the percentage as well.
Well, I tried and I couldn't. It must be some more laborious calculation that I am not understanding, note that when adding the variable, it works, but the percentage is incorrect:

I don't know how I would calculate the percentage, since I modified it.
Thanks for answer.
Last edited:


Kazan Games
I realized that if I change the Y and Height of the scroll area, the percentage values change, then literally the percentage code is wrong, but I don't know how to fix it:

// get percentage
var scrollbar_yp = (scrollbar_y);
scrollbar_pos = median(0, 1, scrollbar_yp / hhr);
I will be very grateful if anyone can help me.
Last edited:


The bottom of the scrollbar is not the bottom position of the sprite, because you're clamping it to the bottom of the scrollbar minus the height of the sprite. So you need to subtract the height of the sprite from the bottom of the scrollbar to figure out the bottom of the range it can travel when you calculate the percentage. I can only say it so many times.