@lattice-ui/scroll-area 0.3.1 → 0.4.0

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @lattice-ui/scroll-area@0.4.0 build C:\Users\retur\OneDrive\Desktop\Workspace\rojo\unnamed-ui-package\packages\scroll-area
+> rbxtsc -p tsconfig.json
+

package/.turbo/turbo-typecheck.log

@@ -0,0 +1,4 @@
+
+> @lattice-ui/scroll-area@0.4.0 typecheck /home/runner/work/lattice-ui/lattice-ui/packages/scroll-area
+> tsc -p tsconfig.typecheck.json
+

package/README.md

@@ -15,4 +15,5 @@ Headless scroll area primitives for Roblox UI with custom scrollbars and thumbs.
 
 - Supports vertical and horizontal scrollbar primitives.
 - `type` supports `auto`, `always`, and `scroll` visibility policies.
+- Clicking a scrollbar track and dragging a thumb both update the viewport canvas position.
 - Thumb/canvas math helpers are exported for unit testing.

package/out/ScrollArea/ScrollAreaRoot.luau

@@ -47,6 +47,17 @@ local function ScrollAreaRoot(props)
 			setShowScrollbarsFromActivity(false)
 		end)
 	end, { scrollHideDelayMs, scrollType })
+	local setScrollPosition = React.useCallback(function(orientation, position)
+		local viewport = viewportRef.current
+		if not viewport then
+			return nil
+		end
+		local axisMetrics = if orientation == "vertical" then metrics.vertical else metrics.horizontal
+		local maxScroll = math.max(0, axisMetrics.contentSize - axisMetrics.viewportSize)
+		local nextPosition = math.clamp(position, 0, maxScroll)
+		viewport.CanvasPosition = if orientation == "vertical" then Vector2.new(viewport.CanvasPosition.X, nextPosition) else Vector2.new(nextPosition, viewport.CanvasPosition.Y)
+		notifyScrollActivity()
+	end, { metrics.horizontal, metrics.vertical, notifyScrollActivity })
 	local hasVerticalOverflow = metrics.vertical.contentSize > metrics.vertical.viewportSize + 1
 	local hasHorizontalOverflow = metrics.horizontal.contentSize > metrics.horizontal.viewportSize + 1
 	local showVerticalScrollbar = if scrollType == "always" then hasVerticalOverflow elseif scrollType == "scroll" then hasVerticalOverflow and showScrollbarsFromActivity else hasVerticalOverflow
@@ -60,11 +71,12 @@ local function ScrollAreaRoot(props)
 			vertical = metrics.vertical,
 			horizontal = metrics.horizontal,
 			setMetrics = setMetrics,
+			setScrollPosition = setScrollPosition,
 			notifyScrollActivity = notifyScrollActivity,
 			showVerticalScrollbar = showVerticalScrollbar,
 			showHorizontalScrollbar = showHorizontalScrollbar,
 		}
-	end, { metrics.horizontal, metrics.vertical, notifyScrollActivity, scrollHideDelayMs, setViewport, showHorizontalScrollbar, showVerticalScrollbar, scrollType })
+	end, { metrics.horizontal, metrics.vertical, notifyScrollActivity, scrollHideDelayMs, setScrollPosition, setViewport, showHorizontalScrollbar, showVerticalScrollbar, scrollType })
 	return React.createElement(ScrollAreaContextProvider, {
 		value = contextValue,
 	}, props.children)

package/out/ScrollArea/ScrollAreaScrollbar.luau

@@ -4,25 +4,70 @@ local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
 local React = _core.React
 local Slot = _core.Slot
 local useScrollAreaContext = TS.import(script, script.Parent, "context").useScrollAreaContext
+local _scrollMath = TS.import(script, script.Parent, "scrollMath")
+local resolveCanvasPositionFromTrackPosition = _scrollMath.resolveCanvasPositionFromTrackPosition
+local resolveThumbOffset = _scrollMath.resolveThumbOffset
+local resolveThumbSize = _scrollMath.resolveThumbSize
+local function isPointerInput(inputObject)
+	return inputObject.UserInputType == Enum.UserInputType.MouseButton1 or inputObject.UserInputType == Enum.UserInputType.Touch
+end
+local function toGuiObject(instance)
+	if not instance or not instance:IsA("GuiObject") then
+		return nil
+	end
+	return instance
+end
 local function ScrollAreaScrollbar(props)
 	local scrollAreaContext = useScrollAreaContext()
+	local scrollbarRef = React.useRef()
 	local vertical = props.orientation == "vertical"
 	local visible = if vertical then scrollAreaContext.showVerticalScrollbar else scrollAreaContext.showHorizontalScrollbar
+	local axisMetrics = if vertical then scrollAreaContext.vertical else scrollAreaContext.horizontal
+	local setScrollbarRef = React.useCallback(function(instance)
+		scrollbarRef.current = toGuiObject(instance)
+	end, {})
+	local handleInputBegan = React.useCallback(function(rbx, inputObject)
+		if not isPointerInput(inputObject) or axisMetrics.contentSize <= axisMetrics.viewportSize then
+			return nil
+		end
+		local track = scrollbarRef.current or rbx
+		local trackSize = math.max(1, if vertical then track.AbsoluteSize.Y else track.AbsoluteSize.X)
+		local trackStart = if vertical then track.AbsolutePosition.Y else track.AbsolutePosition.X
+		local pointerPosition = if vertical then inputObject.Position.Y else inputObject.Position.X
+		local trackPosition = pointerPosition - trackStart
+		local thumbSize = resolveThumbSize(axisMetrics.viewportSize, axisMetrics.contentSize, trackSize)
+		local thumbOffset = resolveThumbOffset(axisMetrics.scrollPosition, axisMetrics.viewportSize, axisMetrics.contentSize, trackSize, thumbSize)
+		if trackPosition >= thumbOffset and trackPosition <= thumbOffset + thumbSize then
+			return nil
+		end
+		local nextCanvasPosition = resolveCanvasPositionFromTrackPosition(trackPosition, axisMetrics.viewportSize, axisMetrics.contentSize, trackSize, thumbSize)
+		scrollAreaContext.setScrollPosition(props.orientation, nextCanvasPosition)
+	end, { axisMetrics.contentSize, axisMetrics.scrollPosition, axisMetrics.viewportSize, props.orientation, scrollAreaContext, vertical })
 	if props.asChild then
 		local child = props.children
 		if not child then
 			error("[ScrollAreaScrollbar] `asChild` requires a child element.")
 		end
 		return React.createElement(Slot, {
+			Active = visible,
+			Event = {
+				InputBegan = handleInputBegan,
+			},
 			Visible = visible,
+			ref = setScrollbarRef,
 		}, child)
 	end
 	return React.createElement("frame", {
+		Active = visible,
 		BackgroundColor3 = Color3.fromRGB(44, 52, 67),
 		BorderSizePixel = 0,
+		Event = {
+			InputBegan = handleInputBegan,
+		},
 		Position = if vertical then UDim2.fromScale(1, 0) else UDim2.fromScale(0, 1),
 		Size = if vertical then UDim2.fromOffset(8, 160) else UDim2.fromOffset(260, 8),
 		Visible = visible,
+		ref = setScrollbarRef,
 	}, props.children)
 end
 return {

package/out/ScrollArea/ScrollAreaThumb.luau

@@ -5,32 +5,129 @@ local React = _core.React
 local Slot = _core.Slot
 local useScrollAreaContext = TS.import(script, script.Parent, "context").useScrollAreaContext
 local _scrollMath = TS.import(script, script.Parent, "scrollMath")
+local resolveCanvasPositionFromThumbOffset = _scrollMath.resolveCanvasPositionFromThumbOffset
 local resolveThumbOffset = _scrollMath.resolveThumbOffset
+local resolveThumbOffsetFromPointerDelta = _scrollMath.resolveThumbOffsetFromPointerDelta
 local resolveThumbSize = _scrollMath.resolveThumbSize
+local UserInputService = game:GetService("UserInputService")
+local function isThumbDragStart(inputObject)
+	return inputObject.UserInputType == Enum.UserInputType.MouseButton1 or inputObject.UserInputType == Enum.UserInputType.Touch
+end
+local function toGuiObject(instance)
+	if not instance or not instance:IsA("GuiObject") then
+		return nil
+	end
+	return instance
+end
 local function ScrollAreaThumb(props)
 	local scrollAreaContext = useScrollAreaContext()
 	local vertical = props.orientation == "vertical"
+	local thumbRef = React.useRef()
+	local dragStateRef = React.useRef()
 	local axisMetrics = if vertical then scrollAreaContext.vertical else scrollAreaContext.horizontal
 	local trackSize = math.max(1, axisMetrics.viewportSize)
 	local thumbSize = resolveThumbSize(axisMetrics.viewportSize, axisMetrics.contentSize, trackSize)
 	local thumbOffset = resolveThumbOffset(axisMetrics.scrollPosition, axisMetrics.viewportSize, axisMetrics.contentSize, trackSize, thumbSize)
 	local sizeScale = if trackSize > 0 then thumbSize / trackSize else 1
 	local offsetScale = if trackSize > 0 then thumbOffset / trackSize else 0
+	local setThumbRef = React.useCallback(function(instance)
+		thumbRef.current = toGuiObject(instance)
+	end, {})
+	local getTrack = React.useCallback(function()
+		local thumb = thumbRef.current
+		local _parent = thumb
+		if _parent ~= nil then
+			_parent = _parent.Parent
+		end
+		local parent = _parent
+		if not parent or not parent:IsA("GuiObject") then
+			return nil
+		end
+		return parent
+	end, {})
+	local handleInputBegan = React.useCallback(function(rbx, inputObject)
+		if not isThumbDragStart(inputObject) or axisMetrics.contentSize <= axisMetrics.viewportSize then
+			return nil
+		end
+		local track = getTrack()
+		if not track then
+			return nil
+		end
+		local actualTrackSize = math.max(1, if vertical then track.AbsoluteSize.Y else track.AbsoluteSize.X)
+		local actualThumbSize = resolveThumbSize(axisMetrics.viewportSize, axisMetrics.contentSize, actualTrackSize)
+		local actualThumbOffset = resolveThumbOffset(axisMetrics.scrollPosition, axisMetrics.viewportSize, axisMetrics.contentSize, actualTrackSize, actualThumbSize)
+		dragStateRef.current = {
+			inputType = inputObject.UserInputType,
+			pointerStart = if vertical then inputObject.Position.Y else inputObject.Position.X,
+			thumbOffsetStart = actualThumbOffset,
+		}
+		if rbx:IsA("GuiButton") then
+			rbx.AutoButtonColor = false
+		end
+	end, { axisMetrics.contentSize, axisMetrics.scrollPosition, axisMetrics.viewportSize, getTrack, vertical })
+	React.useEffect(function()
+		local inputChangedConnection = UserInputService.InputChanged:Connect(function(inputObject)
+			local dragState = dragStateRef.current
+			if not dragState then
+				return nil
+			end
+			local isMatchingInput = if dragState.inputType == Enum.UserInputType.Touch then inputObject.UserInputType == Enum.UserInputType.Touch else inputObject.UserInputType == Enum.UserInputType.MouseMovement
+			if not isMatchingInput then
+				return nil
+			end
+			local track = getTrack()
+			if not track then
+				return nil
+			end
+			local actualTrackSize = math.max(1, if vertical then track.AbsoluteSize.Y else track.AbsoluteSize.X)
+			local actualThumbSize = resolveThumbSize(axisMetrics.viewportSize, axisMetrics.contentSize, actualTrackSize)
+			local pointerPosition = if vertical then inputObject.Position.Y else inputObject.Position.X
+			local thumbOffset = resolveThumbOffsetFromPointerDelta(dragState.thumbOffsetStart, pointerPosition - dragState.pointerStart, actualTrackSize, actualThumbSize)
+			local nextCanvasPosition = resolveCanvasPositionFromThumbOffset(thumbOffset, axisMetrics.viewportSize, axisMetrics.contentSize, actualTrackSize, actualThumbSize)
+			scrollAreaContext.setScrollPosition(props.orientation, nextCanvasPosition)
+		end)
+		local inputEndedConnection = UserInputService.InputEnded:Connect(function(inputObject)
+			local dragState = dragStateRef.current
+			if not dragState then
+				return nil
+			end
+			if dragState.inputType == Enum.UserInputType.Touch and inputObject.UserInputType == Enum.UserInputType.Touch then
+				dragStateRef.current = nil
+			end
+			if dragState.inputType == Enum.UserInputType.MouseButton1 and inputObject.UserInputType == Enum.UserInputType.MouseButton1 then
+				dragStateRef.current = nil
+			end
+		end)
+		return function()
+			inputChangedConnection:Disconnect()
+			inputEndedConnection:Disconnect()
+		end
+	end, { axisMetrics.contentSize, axisMetrics.viewportSize, getTrack, props.orientation, scrollAreaContext, vertical })
 	if props.asChild then
 		local child = props.children
 		if not child then
 			error("[ScrollAreaThumb] `asChild` requires a child element.")
 		end
 		return React.createElement(Slot, {
+			Active = axisMetrics.contentSize > axisMetrics.viewportSize,
+			Event = {
+				InputBegan = handleInputBegan,
+			},
 			Position = if vertical then UDim2.fromScale(0, offsetScale) else UDim2.fromScale(offsetScale, 0),
 			Size = if vertical then UDim2.fromScale(1, sizeScale) else UDim2.fromScale(sizeScale, 1),
+			ref = setThumbRef,
 		}, child)
 	end
 	return React.createElement("frame", {
+		Active = axisMetrics.contentSize > axisMetrics.viewportSize,
 		BackgroundColor3 = Color3.fromRGB(118, 128, 149),
 		BorderSizePixel = 0,
+		Event = {
+			InputBegan = handleInputBegan,
+		},
 		Position = if vertical then UDim2.fromScale(0, offsetScale) else UDim2.fromScale(offsetScale, 0),
 		Size = if vertical then UDim2.fromScale(1, sizeScale) else UDim2.fromScale(sizeScale, 1),
+		ref = setThumbRef,
 	}, React.createElement("uicorner", {
 		CornerRadius = UDim.new(1, 0),
 	}), props.children)

package/out/ScrollArea/scrollMath.d.ts

@@ -1,3 +1,6 @@
 export declare function resolveThumbSize(viewportSize: number, contentSize: number, trackSize: number, minimumThumbSize?: number): number;
 export declare function resolveThumbOffset(scrollPosition: number, viewportSize: number, contentSize: number, trackSize: number, thumbSize: number): number;
 export declare function resolveCanvasPositionFromThumbOffset(thumbOffset: number, viewportSize: number, contentSize: number, trackSize: number, thumbSize: number): number;
+export declare function resolveThumbOffsetFromTrackPosition(trackPosition: number, trackSize: number, thumbSize: number): number;
+export declare function resolveThumbOffsetFromPointerDelta(initialThumbOffset: number, pointerDelta: number, trackSize: number, thumbSize: number): number;
+export declare function resolveCanvasPositionFromTrackPosition(trackPosition: number, viewportSize: number, contentSize: number, trackSize: number, thumbSize: number): number;

package/out/ScrollArea/scrollMath.luau

@@ -29,8 +29,23 @@ local function resolveCanvasPositionFromThumbOffset(thumbOffset, viewportSize, c
 	local ratio = math.clamp(thumbOffset / maxThumbOffset, 0, 1)
 	return ratio * maxScroll
 end
+local function resolveThumbOffsetFromTrackPosition(trackPosition, trackSize, thumbSize)
+	local maxThumbOffset = math.max(0, trackSize - thumbSize)
+	return math.clamp(trackPosition - thumbSize / 2, 0, maxThumbOffset)
+end
+local function resolveThumbOffsetFromPointerDelta(initialThumbOffset, pointerDelta, trackSize, thumbSize)
+	local maxThumbOffset = math.max(0, trackSize - thumbSize)
+	return math.clamp(initialThumbOffset + pointerDelta, 0, maxThumbOffset)
+end
+local function resolveCanvasPositionFromTrackPosition(trackPosition, viewportSize, contentSize, trackSize, thumbSize)
+	local thumbOffset = resolveThumbOffsetFromTrackPosition(trackPosition, trackSize, thumbSize)
+	return resolveCanvasPositionFromThumbOffset(thumbOffset, viewportSize, contentSize, trackSize, thumbSize)
+end
 return {
 	resolveThumbSize = resolveThumbSize,
 	resolveThumbOffset = resolveThumbOffset,
 	resolveCanvasPositionFromThumbOffset = resolveCanvasPositionFromThumbOffset,
+	resolveThumbOffsetFromTrackPosition = resolveThumbOffsetFromTrackPosition,
+	resolveThumbOffsetFromPointerDelta = resolveThumbOffsetFromPointerDelta,
+	resolveCanvasPositionFromTrackPosition = resolveCanvasPositionFromTrackPosition,
 }

package/out/ScrollArea/types.d.ts

@@ -17,6 +17,7 @@ export type ScrollAreaContextValue = {
         vertical: ScrollAxisMetrics;
         horizontal: ScrollAxisMetrics;
     }) => void;
+    setScrollPosition: (orientation: ScrollAreaOrientation, position: number) => void;
     notifyScrollActivity: () => void;
     showVerticalScrollbar: boolean;
     showHorizontalScrollbar: boolean;

package/out/index.d.ts

@@ -10,5 +10,5 @@ export declare const ScrollArea: {
     readonly Thumb: typeof ScrollAreaThumb;
     readonly Corner: typeof ScrollAreaCorner;
 };
-export { resolveCanvasPositionFromThumbOffset, resolveThumbOffset, resolveThumbSize } from "./ScrollArea/scrollMath";
+export { resolveCanvasPositionFromThumbOffset, resolveCanvasPositionFromTrackPosition, resolveThumbOffset, resolveThumbOffsetFromPointerDelta, resolveThumbOffsetFromTrackPosition, resolveThumbSize, } from "./ScrollArea/scrollMath";
 export type { ScrollAreaContextValue, ScrollAreaCornerProps, ScrollAreaOrientation, ScrollAreaProps, ScrollAreaScrollbarProps, ScrollAreaThumbProps, ScrollAreaType, ScrollAreaViewportProps, ScrollAxisMetrics, } from "./ScrollArea/types";

package/out/init.luau

@@ -15,7 +15,10 @@ local ScrollArea = {
 }
 local _scrollMath = TS.import(script, script, "ScrollArea", "scrollMath")
 exports.resolveCanvasPositionFromThumbOffset = _scrollMath.resolveCanvasPositionFromThumbOffset
+exports.resolveCanvasPositionFromTrackPosition = _scrollMath.resolveCanvasPositionFromTrackPosition
 exports.resolveThumbOffset = _scrollMath.resolveThumbOffset
+exports.resolveThumbOffsetFromPointerDelta = _scrollMath.resolveThumbOffsetFromPointerDelta
+exports.resolveThumbOffsetFromTrackPosition = _scrollMath.resolveThumbOffsetFromTrackPosition
 exports.resolveThumbSize = _scrollMath.resolveThumbSize
 exports.ScrollArea = ScrollArea
 return exports

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@lattice-ui/scroll-area",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
   "dependencies": {
-    "@lattice-ui/core": "0.3.1"
+    "@lattice-ui/core": "0.4.0"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",

package/src/ScrollArea/ScrollAreaRoot.tsx

@@ -51,6 +51,27 @@ export function ScrollAreaRoot(props: ScrollAreaProps) {
     });
   }, [scrollHideDelayMs, scrollType]);
 
+  const setScrollPosition = React.useCallback(
+    (orientation: "vertical" | "horizontal", position: number) => {
+      const viewport = viewportRef.current;
+      if (!viewport) {
+        return;
+      }
+
+      const axisMetrics = orientation === "vertical" ? metrics.vertical : metrics.horizontal;
+      const maxScroll = math.max(0, axisMetrics.contentSize - axisMetrics.viewportSize);
+      const nextPosition = math.clamp(position, 0, maxScroll);
+
+      viewport.CanvasPosition =
+        orientation === "vertical"
+          ? new Vector2(viewport.CanvasPosition.X, nextPosition)
+          : new Vector2(nextPosition, viewport.CanvasPosition.Y);
+
+      notifyScrollActivity();
+    },
+    [metrics.horizontal, metrics.vertical, notifyScrollActivity],
+  );
+
   const hasVerticalOverflow = metrics.vertical.contentSize > metrics.vertical.viewportSize + 1;
   const hasHorizontalOverflow = metrics.horizontal.contentSize > metrics.horizontal.viewportSize + 1;
 
@@ -77,6 +98,7 @@ export function ScrollAreaRoot(props: ScrollAreaProps) {
       vertical: metrics.vertical,
       horizontal: metrics.horizontal,
       setMetrics,
+      setScrollPosition,
       notifyScrollActivity,
       showVerticalScrollbar,
       showHorizontalScrollbar,
@@ -86,6 +108,7 @@ export function ScrollAreaRoot(props: ScrollAreaProps) {
       metrics.vertical,
       notifyScrollActivity,
       scrollHideDelayMs,
+      setScrollPosition,
       setViewport,
       showHorizontalScrollbar,
       showVerticalScrollbar,

package/src/ScrollArea/ScrollAreaScrollbar.tsx

@@ -1,12 +1,78 @@
 import { React, Slot } from "@lattice-ui/core";
 import { useScrollAreaContext } from "./context";
+import { resolveCanvasPositionFromTrackPosition, resolveThumbOffset, resolveThumbSize } from "./scrollMath";
 import type { ScrollAreaScrollbarProps } from "./types";
 
+function isPointerInput(inputObject: InputObject) {
+  return (
+    inputObject.UserInputType === Enum.UserInputType.MouseButton1 ||
+    inputObject.UserInputType === Enum.UserInputType.Touch
+  );
+}
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
 export function ScrollAreaScrollbar(props: ScrollAreaScrollbarProps) {
   const scrollAreaContext = useScrollAreaContext();
+  const scrollbarRef = React.useRef<GuiObject>();
 
   const vertical = props.orientation === "vertical";
   const visible = vertical ? scrollAreaContext.showVerticalScrollbar : scrollAreaContext.showHorizontalScrollbar;
+  const axisMetrics = vertical ? scrollAreaContext.vertical : scrollAreaContext.horizontal;
+
+  const setScrollbarRef = React.useCallback((instance: Instance | undefined) => {
+    scrollbarRef.current = toGuiObject(instance);
+  }, []);
+
+  const handleInputBegan = React.useCallback(
+    (rbx: GuiObject, inputObject: InputObject) => {
+      if (!isPointerInput(inputObject) || axisMetrics.contentSize <= axisMetrics.viewportSize) {
+        return;
+      }
+
+      const track = scrollbarRef.current ?? rbx;
+      const trackSize = math.max(1, vertical ? track.AbsoluteSize.Y : track.AbsoluteSize.X);
+      const trackStart = vertical ? track.AbsolutePosition.Y : track.AbsolutePosition.X;
+      const pointerPosition = vertical ? inputObject.Position.Y : inputObject.Position.X;
+      const trackPosition = pointerPosition - trackStart;
+      const thumbSize = resolveThumbSize(axisMetrics.viewportSize, axisMetrics.contentSize, trackSize);
+      const thumbOffset = resolveThumbOffset(
+        axisMetrics.scrollPosition,
+        axisMetrics.viewportSize,
+        axisMetrics.contentSize,
+        trackSize,
+        thumbSize,
+      );
+
+      if (trackPosition >= thumbOffset && trackPosition <= thumbOffset + thumbSize) {
+        return;
+      }
+
+      const nextCanvasPosition = resolveCanvasPositionFromTrackPosition(
+        trackPosition,
+        axisMetrics.viewportSize,
+        axisMetrics.contentSize,
+        trackSize,
+        thumbSize,
+      );
+
+      scrollAreaContext.setScrollPosition(props.orientation, nextCanvasPosition);
+    },
+    [
+      axisMetrics.contentSize,
+      axisMetrics.scrollPosition,
+      axisMetrics.viewportSize,
+      props.orientation,
+      scrollAreaContext,
+      vertical,
+    ],
+  );
 
   if (props.asChild) {
     const child = props.children;
@@ -14,16 +80,23 @@ export function ScrollAreaScrollbar(props: ScrollAreaScrollbarProps) {
       error("[ScrollAreaScrollbar] `asChild` requires a child element.");
     }
 
-    return <Slot Visible={visible}>{child}</Slot>;
+    return (
+      <Slot Active={visible} Event={{ InputBegan: handleInputBegan }} Visible={visible} ref={setScrollbarRef}>
+        {child}
+      </Slot>
+    );
   }
 
   return (
     <frame
+      Active={visible}
       BackgroundColor3={Color3.fromRGB(44, 52, 67)}
       BorderSizePixel={0}
+      Event={{ InputBegan: handleInputBegan }}
       Position={vertical ? UDim2.fromScale(1, 0) : UDim2.fromScale(0, 1)}
       Size={vertical ? UDim2.fromOffset(8, 160) : UDim2.fromOffset(260, 8)}
       Visible={visible}
+      ref={setScrollbarRef}
     >
       {props.children}
     </frame>

package/src/ScrollArea/ScrollAreaThumb.tsx

@@ -1,11 +1,41 @@
 import { React, Slot } from "@lattice-ui/core";
 import { useScrollAreaContext } from "./context";
-import { resolveThumbOffset, resolveThumbSize } from "./scrollMath";
+import {
+  resolveCanvasPositionFromThumbOffset,
+  resolveThumbOffset,
+  resolveThumbOffsetFromPointerDelta,
+  resolveThumbSize,
+} from "./scrollMath";
 import type { ScrollAreaThumbProps } from "./types";
 
+const UserInputService = game.GetService("UserInputService");
+
+type DragState = {
+  inputType: Enum.UserInputType;
+  pointerStart: number;
+  thumbOffsetStart: number;
+};
+
+function isThumbDragStart(inputObject: InputObject) {
+  return (
+    inputObject.UserInputType === Enum.UserInputType.MouseButton1 ||
+    inputObject.UserInputType === Enum.UserInputType.Touch
+  );
+}
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
 export function ScrollAreaThumb(props: ScrollAreaThumbProps) {
   const scrollAreaContext = useScrollAreaContext();
   const vertical = props.orientation === "vertical";
+  const thumbRef = React.useRef<GuiObject>();
+  const dragStateRef = React.useRef<DragState>();
 
   const axisMetrics = vertical ? scrollAreaContext.vertical : scrollAreaContext.horizontal;
   const trackSize = math.max(1, axisMetrics.viewportSize);
@@ -21,6 +51,120 @@ export function ScrollAreaThumb(props: ScrollAreaThumbProps) {
   const sizeScale = trackSize > 0 ? thumbSize / trackSize : 1;
   const offsetScale = trackSize > 0 ? thumbOffset / trackSize : 0;
 
+  const setThumbRef = React.useCallback((instance: Instance | undefined) => {
+    thumbRef.current = toGuiObject(instance);
+  }, []);
+
+  const getTrack = React.useCallback(() => {
+    const thumb = thumbRef.current;
+    const parent = thumb?.Parent;
+    if (!parent || !parent.IsA("GuiObject")) {
+      return undefined;
+    }
+
+    return parent;
+  }, []);
+
+  const handleInputBegan = React.useCallback(
+    (rbx: GuiObject, inputObject: InputObject) => {
+      if (!isThumbDragStart(inputObject) || axisMetrics.contentSize <= axisMetrics.viewportSize) {
+        return;
+      }
+
+      const track = getTrack();
+      if (!track) {
+        return;
+      }
+
+      const actualTrackSize = math.max(1, vertical ? track.AbsoluteSize.Y : track.AbsoluteSize.X);
+      const actualThumbSize = resolveThumbSize(axisMetrics.viewportSize, axisMetrics.contentSize, actualTrackSize);
+      const actualThumbOffset = resolveThumbOffset(
+        axisMetrics.scrollPosition,
+        axisMetrics.viewportSize,
+        axisMetrics.contentSize,
+        actualTrackSize,
+        actualThumbSize,
+      );
+
+      dragStateRef.current = {
+        inputType: inputObject.UserInputType,
+        pointerStart: vertical ? inputObject.Position.Y : inputObject.Position.X,
+        thumbOffsetStart: actualThumbOffset,
+      };
+
+      if (rbx.IsA("GuiButton")) {
+        rbx.AutoButtonColor = false;
+      }
+    },
+    [axisMetrics.contentSize, axisMetrics.scrollPosition, axisMetrics.viewportSize, getTrack, vertical],
+  );
+
+  React.useEffect(() => {
+    const inputChangedConnection = UserInputService.InputChanged.Connect((inputObject) => {
+      const dragState = dragStateRef.current;
+      if (!dragState) {
+        return;
+      }
+
+      const isMatchingInput =
+        dragState.inputType === Enum.UserInputType.Touch
+          ? inputObject.UserInputType === Enum.UserInputType.Touch
+          : inputObject.UserInputType === Enum.UserInputType.MouseMovement;
+
+      if (!isMatchingInput) {
+        return;
+      }
+
+      const track = getTrack();
+      if (!track) {
+        return;
+      }
+
+      const actualTrackSize = math.max(1, vertical ? track.AbsoluteSize.Y : track.AbsoluteSize.X);
+      const actualThumbSize = resolveThumbSize(axisMetrics.viewportSize, axisMetrics.contentSize, actualTrackSize);
+      const pointerPosition = vertical ? inputObject.Position.Y : inputObject.Position.X;
+      const thumbOffset = resolveThumbOffsetFromPointerDelta(
+        dragState.thumbOffsetStart,
+        pointerPosition - dragState.pointerStart,
+        actualTrackSize,
+        actualThumbSize,
+      );
+
+      const nextCanvasPosition = resolveCanvasPositionFromThumbOffset(
+        thumbOffset,
+        axisMetrics.viewportSize,
+        axisMetrics.contentSize,
+        actualTrackSize,
+        actualThumbSize,
+      );
+
+      scrollAreaContext.setScrollPosition(props.orientation, nextCanvasPosition);
+    });
+
+    const inputEndedConnection = UserInputService.InputEnded.Connect((inputObject) => {
+      const dragState = dragStateRef.current;
+      if (!dragState) {
+        return;
+      }
+
+      if (dragState.inputType === Enum.UserInputType.Touch && inputObject.UserInputType === Enum.UserInputType.Touch) {
+        dragStateRef.current = undefined;
+      }
+
+      if (
+        dragState.inputType === Enum.UserInputType.MouseButton1 &&
+        inputObject.UserInputType === Enum.UserInputType.MouseButton1
+      ) {
+        dragStateRef.current = undefined;
+      }
+    });
+
+    return () => {
+      inputChangedConnection.Disconnect();
+      inputEndedConnection.Disconnect();
+    };
+  }, [axisMetrics.contentSize, axisMetrics.viewportSize, getTrack, props.orientation, scrollAreaContext, vertical]);
+
   if (props.asChild) {
     const child = props.children;
     if (!child) {
@@ -29,8 +173,11 @@ export function ScrollAreaThumb(props: ScrollAreaThumbProps) {
 
     return (
       <Slot
+        Active={axisMetrics.contentSize > axisMetrics.viewportSize}
+        Event={{ InputBegan: handleInputBegan }}
         Position={vertical ? UDim2.fromScale(0, offsetScale) : UDim2.fromScale(offsetScale, 0)}
         Size={vertical ? UDim2.fromScale(1, sizeScale) : UDim2.fromScale(sizeScale, 1)}
+        ref={setThumbRef}
       >
         {child}
       </Slot>
@@ -39,10 +186,13 @@ export function ScrollAreaThumb(props: ScrollAreaThumbProps) {
 
   return (
     <frame
+      Active={axisMetrics.contentSize > axisMetrics.viewportSize}
       BackgroundColor3={Color3.fromRGB(118, 128, 149)}
       BorderSizePixel={0}
+      Event={{ InputBegan: handleInputBegan }}
       Position={vertical ? UDim2.fromScale(0, offsetScale) : UDim2.fromScale(offsetScale, 0)}
       Size={vertical ? UDim2.fromScale(1, sizeScale) : UDim2.fromScale(sizeScale, 1)}
+      ref={setThumbRef}
     >
       <uicorner CornerRadius={new UDim(1, 0)} />
       {props.children}

package/src/ScrollArea/scrollMath.ts

@@ -43,3 +43,29 @@ export function resolveCanvasPositionFromThumbOffset(
   const ratio = math.clamp(thumbOffset / maxThumbOffset, 0, 1);
   return ratio * maxScroll;
 }
+
+export function resolveThumbOffsetFromTrackPosition(trackPosition: number, trackSize: number, thumbSize: number) {
+  const maxThumbOffset = math.max(0, trackSize - thumbSize);
+  return math.clamp(trackPosition - thumbSize / 2, 0, maxThumbOffset);
+}
+
+export function resolveThumbOffsetFromPointerDelta(
+  initialThumbOffset: number,
+  pointerDelta: number,
+  trackSize: number,
+  thumbSize: number,
+) {
+  const maxThumbOffset = math.max(0, trackSize - thumbSize);
+  return math.clamp(initialThumbOffset + pointerDelta, 0, maxThumbOffset);
+}
+
+export function resolveCanvasPositionFromTrackPosition(
+  trackPosition: number,
+  viewportSize: number,
+  contentSize: number,
+  trackSize: number,
+  thumbSize: number,
+) {
+  const thumbOffset = resolveThumbOffsetFromTrackPosition(trackPosition, trackSize, thumbSize);
+  return resolveCanvasPositionFromThumbOffset(thumbOffset, viewportSize, contentSize, trackSize, thumbSize);
+}

package/src/ScrollArea/types.ts

@@ -17,6 +17,7 @@ export type ScrollAreaContextValue = {
   vertical: ScrollAxisMetrics;
   horizontal: ScrollAxisMetrics;
   setMetrics: (metrics: { vertical: ScrollAxisMetrics; horizontal: ScrollAxisMetrics }) => void;
+  setScrollPosition: (orientation: ScrollAreaOrientation, position: number) => void;
   notifyScrollActivity: () => void;
   showVerticalScrollbar: boolean;
   showHorizontalScrollbar: boolean;

package/src/index.ts

@@ -12,7 +12,14 @@ export const ScrollArea = {
   Corner: ScrollAreaCorner,
 } as const;
 
-export { resolveCanvasPositionFromThumbOffset, resolveThumbOffset, resolveThumbSize } from "./ScrollArea/scrollMath";
+export {
+  resolveCanvasPositionFromThumbOffset,
+  resolveCanvasPositionFromTrackPosition,
+  resolveThumbOffset,
+  resolveThumbOffsetFromPointerDelta,
+  resolveThumbOffsetFromTrackPosition,
+  resolveThumbSize,
+} from "./ScrollArea/scrollMath";
 export type {
   ScrollAreaContextValue,
   ScrollAreaCornerProps,