Showing code for

Scrollbars

Scrolling lists with drag, mouse wheel and a draggable thumb, plus adding rows from code.

What zStudio needs

Set the container type to Scroll Bar and give it these three children. Scrolling, clipping and the thumb all work with no code.

shopList (Scroll Bar)
├─ scrollContent   everything that scrolls. Can be taller than the list.
├─ scrollBar       the bar. Its height is the visible height of the list.
└─ beed            the thumb you drag along the bar

The visible width runs from scrollContent to scrollBar, so place the bar on the right edge of the content. If the content fits, the scrollbar hides itself.

Buttons and toggles inside scrollContent work normally. Get them with get() as usual.

const shop = stage.get('shopList') as ZScroll;

const buyBtn = shop.get('buySword') as ZButton;

Add rows from code

Spawn a row template, place it inside scrollContent, and call applyTransform() when you finish. That re-measures the list.

const rowHeight = 80;

items.forEach((item, i) => {
  const row = ZSceneStack.spawn('ShopRow') as ZContainer;
  row.y = i * rowHeight;
  row.get('nameText')?.setText(item.name);

  shop.scrollContent.addChild(row);
});

shop.applyTransform();

Good to know

  • The mouse wheel listens everywhere, not just over the list, and it moves every list in the scene. Turn it off for lists that are hidden or inactive with shop.scrollingEnabled = false.
  • Resizing or rotating the screen scrolls the list back to the top.
  • Call shop.removeListeners() before you remove a list from the screen.
← SlidersStates →