Creating a scrollable area

I am trying to create a ListBox where each ListItem is just some text. I can make it so if a ListItem goes off the ListBox’s height then don’t show it. This is just a simple if statement in my render function checking to see if the ListItem’s position is inside the ListBox’s rectangle.

I want to improve this by making the ListBox scrollable. So similar to the picture below, I should be able to partially see the ListItem if I start scrolling down until it’s fully in view.

How would I go about doing this? I’m thinking I would need some Camera and only render things inside the Camera’s rectangle. Though, I do not know how to begin this.

My current code just doesn’t render the ListItem if it goes off the ListBox’s rectangle:

class ListBox {
  private:
    std::vector<ListItem*> list_items;

  public:
    ListBox();
    ~ListBox();

    void update();
    void render();
}

void ListBox::render() {
  // Loop through list items here
  if(item->rectangle.h + item->rectangle.y <= this->rectangle.h + this->rectangle.y) {
   item->render();
  }
}

Without the if statement, it looks like this:

Capture

I want “Test: 8” and “Test: 9” to be hidden inside the white rectangle until I start to scroll down (where the items would start to be partially shown and the top ListItem’s would start to go off view like a normal scrolling area).

You can use clipping to restrict the area that can be rendered to (or scissoring if you are drawing using OpenGL).

Before drawing the list items call https://wiki.libsdl.org/SDL_RenderSetClipRect to restrict drawing to a specific area (or glScissor if you are using OpenGL).

Thank you very much! I was able to get it working. :slight_smile: