Creating a scrollable area


#1

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).


#2

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).


#3

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