UI 'Scrolling' List Functionality Help

I’m working on a UI system for my game, it’s like a scrolling frame except it uses an ‘Up’ and ‘Down’ button to navigate the scrolling frame; this is the part I’m stuck on. I know how to get through the list of options via the buttons, but how would I get the scrolling frame to focus on the selected item via a function?

I’m stumped on how to even get started:

do
	Utility:ClearChildrenOfClass(mapSection.List,"Frame")
	
	local function setCard(cardObject: Frame)
		local cardAbsolutePosition = cardObject.AbsolutePosition
		local cardAbsoluteSize = cardObject.AbsoluteSize
		local listAbsoluteSize = mapSection.List.AbsoluteSize
		-- this function should take a card object, then highlight the card (don't 
        -- worry about this), then if the card isn't in view of the scrollingframe
        -- area, move the scrollingframe's scroll position to the card
	end
		
	local cardCount = 0
	for operationId,operationData in pairs(operations) do
		if operationData.hidden then
			continue
		end
		local newCard = script.map_example:Clone()
		newCard.Title.Text = operationData.displayName:upper()
		newCard.Active = operationData.canSelect
		newCard.Parent = mapSection.List
		cardCount += 1
	end
		
	local canvasSize = UDim2.new(0,0,0,((cardCount * script.map_example.Size.Y.Offset) + ((cardCount - 1) * (5))))
	local cardList,currentIndex = Utility:GetChildrenOfClass(mapSection.List,"Frame"),1
		
	mapSection.List.CanvasSize = canvasSize
	setCard(cardList[1])
end

For example: in the screenshot below, the selection would start on the card ‘The Facility4’ then if I clicked the bottom ‘X’ button 5 times, the scrolling frame would move to fit the card ‘The Facility2’ completely in.


https://gyazo.com/96488dc182a692239bc0e52168b9b97e (id like to replicate this effect)
Any help would be much appreciated,
Thanks! :smiley:

You can use CanvasPosition property to scroll the frame.

I’m aware of how ScrollingFrames work, the question I’m asking is how would I calculate the position and produce the effect shown in the GIF.