scrollIntoView

scrollIntoView(opts?) returns a ref function that calls node.scrollIntoView(opts) after the element is mounted. Options are forwarded verbatim to the DOM method — pass { behavior: 'smooth', block: 'center' } for a centered scroll, or a boolean (alignToTop) for the legacy form. Part of pota/use/scroll.

Arguments

Argument	Type	Description
opts	boolean | ScrollIntoViewOptions?	Forwarded verbatim to node.scrollIntoView on mount.

Returns: a ref function (node) => void for use:ref.

Examples

Scroll a list item into view

Marks one item in a scrollable list as the target and smoothly centers it on mount via use:ref. Clicking the button re-mounts the highlighted row, which re-triggers the scroll.

import { render, signal } from 'pota'
import { For, Show } from 'pota/components'
import { scrollIntoView } from 'pota/use/scroll'

function App() {
	const selected = signal(null)
	const items = Array.from({ length: 30 }, (_, i) => i + 1)

	return (
		<div>
			<button on:click={() => selected.write(20)}>
				scroll to #20
			</button>
			<button
				on:click={() => selected.write(null)}
				style={{ 'margin-left': '0.5rem' }}
			>
				clear
			</button>

			<ul
				style={{
					height: '300px',
					overflow: 'auto',
					border: '1px solid #aaa',
				}}
			>
				<For each={items}>
					{item => (
						<Show
							when={() => selected.read() === item}
							fallback={<li>item {item}</li>}
						>
							<li
								use:ref={scrollIntoView({
									behavior: 'smooth',
									block: 'center',
								})}
								style={{
									background: 'mediumseagreen',
									color: 'white',
								}}
							>
								item {item} (target)
							</li>
						</Show>
					)}
				</For>
			</ul>
		</div>
	)
}

render(App)