Skip to content

Scroll Rects

Chris A edited this page Sep 20, 2026 · 2 revisions

Scroll Rect

Graphics 800, 600, 32, 2
SetBuffer BackBuffer()

scrollY = 0

While Not KeyHit(1)
	mz = MouseZSpeed()
	scrollY = scrollY - mz * 28
	If scrollY < 0 Then scrollY = 0
	If scrollY > 10 * 28 - 200 Then scrollY = 10 * 28 - 200

	Cls
	BeginScrollRect(100, 100, 300, 200, 0, scrollY)
		For i = 0 To 9
			Text 8, i * 28, "Item " + i
		Next
	EndScrollRect()

	Flip
Wend

End

BeginScrollRect x, y, width, height [, scrollX] [, scrollY] clips all 2D drawing to a rectangle and shifts what's inside it by the scroll offset. EndScrollRect restores the previous clip. x, y are relative to the current origin, so scroll rects can nest


Example script

Graphics 800, 600, 32, 2
SetBuffer BackBuffer()
SetFont LoadFont("Arial", 18)

Const PANEL_X = 220
Const PANEL_Y = 80
Const PANEL_W = 360
Const PANEL_H = 400
Const ROW_H = 28
Const ITEM_COUNT = 40

contentH = ITEM_COUNT * ROW_H
maxScroll = contentH - PANEL_H
If maxScroll < 0 Then maxScroll = 0

scrollY# = 0

While Not KeyHit(1)
	mz = MouseZSpeed()
	mx = MouseX() : my = MouseY()
	overPanel = (mx >= PANEL_X And mx < PANEL_X + PANEL_W And my >= PANEL_Y And my < PANEL_Y + PANEL_H)

	sbX = PANEL_X + PANEL_W + 4
	thumbH = PANEL_H * PANEL_H / contentH
	If thumbH > PANEL_H Then thumbH = PANEL_H
	If thumbH < 20 Then thumbH = 20
	If maxScroll > 0 Then thumbY = PANEL_Y + (PANEL_H - thumbH) * scrollY / maxScroll Else thumbY = PANEL_Y

	If MouseHit(1) And mx >= sbX And mx < sbX + 8 And my >= PANEL_Y And my < PANEL_Y + PANEL_H
		dragging = 1
		If my >= thumbY And my < thumbY + thumbH
			dragOffsetY = my - thumbY
		Else
			dragOffsetY = thumbH / 2
		EndIf
	EndIf

	If dragging
		If MouseDown(1)
			If maxScroll > 0 Then scrollY = (my - dragOffsetY - PANEL_Y) * maxScroll / (PANEL_H - thumbH)
		Else
			dragging = 0
		EndIf
	EndIf

	If overPanel Then scrollY = scrollY - mz * ROW_H
	If scrollY < 0 Then scrollY = 0
	If scrollY > maxScroll Then scrollY = maxScroll

	Cls

	Color 40, 40, 40
	Rect PANEL_X - 2, PANEL_Y - 2, PANEL_W + 4, PANEL_H + 4, 1
	Color 200, 200, 200

	; the actual feature
	BeginScrollRect(PANEL_X, PANEL_Y, PANEL_W, PANEL_H, 0, scrollY)
		For i = 0 To ITEM_COUNT - 1
			y = i * ROW_H
			If i Mod 2 = 0 Then Color 55, 55, 65 Else Color 45, 45, 55
			Rect 0, y, PANEL_W, ROW_H, 1
			Color 230, 230, 230
			Text 8, y + 5, "Item " + i
			Color 120, 120, 140
			Text PANEL_W - 24, y + 5, "clipped >>>"
		Next

	EndScrollRect()

	;scrollbar
	Color 70, 70, 70
	Rect sbX, PANEL_Y, 8, PANEL_H, 1
	If maxScroll > 0
		thumbY = PANEL_Y + (PANEL_H - thumbH) * scrollY / maxScroll
		If dragging Or (mx >= sbX And mx < sbX + 8 And my >= thumbY And my < thumbY + thumbH)
			Color 210, 210, 210
		Else
			Color 160, 160, 160
		EndIf
		Rect sbX, thumbY, 8, thumbH, 1
	EndIf

	Flip

Wend

End

Scrollbars and their input are Blitz-side, the runtime only clips and scrolls. Works for every 2D draw command, including scaled and rotated images

Clone this wiki locally