Scroll Area

1import type { Component, JSX } from "solid-js";
2import { splitProps } from "solid-js";
3import { cn } from "~/lib/utils";
4 
5// Scroll Area — lightweight native implementation with custom scrollbar styling
6 
7const ScrollArea: Component<
8  JSX.HTMLAttributes<HTMLDivElement> & { orientation?: "vertical" | "horizontal" | "both" }
9> = (props) => {
10  const [local, rest] = splitProps(props, ["class", "children", "orientation"]);
11  const orientation = () => local.orientation ?? "vertical";
12 
13  return (
14    <div class={cn("relative overflow-hidden", local.class)} {...rest}>
15      <div
16        class={cn(
17          "h-full w-full rounded-[inherit]",
18          orientation() === "vertical" && "overflow-y-auto overflow-x-hidden",
19          orientation() === "horizontal" && "overflow-x-auto overflow-y-hidden",
20          orientation() === "both" && "overflow-auto",
21          // Custom scrollbar via Tailwind / CSS vars
22          "[&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar-track]:bg-transparent",
23          "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border",
24          "[&::-webkit-scrollbar-thumb:hover]:bg-muted-foreground/40",
25        )}
26      >
27        {local.children}
28      </div>
29    </div>
30  );
31};
32 
33const ScrollBar: Component<
34  JSX.HTMLAttributes<HTMLDivElement> & { orientation?: "vertical" | "horizontal" }
35> = (props) => {
36  const [local, rest] = splitProps(props, ["class", "orientation"]);
37  const isHorizontal = () => local.orientation === "horizontal";
38  return (
39    <div
40      class={cn(
41        "flex touch-none select-none transition-colors",
42        isHorizontal()
43          ? "h-2.5 flex-col border-t border-t-transparent p-[1px]"
44          : "h-full w-2.5 border-l border-l-transparent p-[1px]",
45        local.class,
46      )}
47      {...rest}
48    >
49      <div class="relative flex-1 rounded-full bg-border" />
50    </div>
51  );
52};
53 
54export { ScrollArea, ScrollBar };