demo · v140

Tree Navigation

A file tree sidebar and a detail panel. Click any tree item and compare three modes: scoped uses { container: treePanel } so only the tree scrolls — the detail panel never jumps. Switch to nearest or all containers to see the difference.

scrollIntoView mode:
Select a file in the tree to see its details here. The detail panel should not scroll when you click items — only the tree should move.
tree scrolled: 0
detail scrolled: 0
// Scoped: only the tree panel scrolls
item.scrollIntoView({ block: "center", container: treePanel });

// Nearest: scrolls the nearest scroll ancestor of the clicked item
item.scrollIntoView({ block: "center" });

// All: scrolls every scroll ancestor including the viewport
item.scrollIntoView({ block: "center", container: "all" });

see also