---
agentTools:
  projectIndex: https://angular2-tree.readme.io/llms.txt
---

# Auto Scrolling

When navigating with keys or clicking a node in the edges of the screen, the tree will automatically try to scroll the selected node into view.
Also, you can call `scrollIntoView` on any node to make it visible.

[block:api-header]
{
  "title": "Inner Scroll"
}
[/block]

Auto scrolling is built-in to the tree. Simply wrap the tree with a container that has a height and you're good.
The tree has an inner element called viewport that is scrollable.

[block:api-header]
{
  "title": "External Scroll (Scrolling as part of the body / other container)"
}
[/block]

Sometimes you don't want to wrap the tree with a scrollable container, and want the scrolling to be part of a different element.
Use the `scrollContainer` option for this purpose as described in [Options](https://angular2-tree.readme.io/docs/options-2)

[block:api-header]
{
  "title": "Demo of scrollContainer"
}
[/block]

[block:html]
{
  "html": "<iframe src=\"https://angular-tree-component.azurewebsites.net/#/scroll-container\" width=\"500px\" height=\"300px\"></iframe>\n"
}
[/block]

[block:html]
{
  "html": "<a href=\"https://github.com/CirclonGroup/angular-tree-component/blob/master/projects/example-app/src/app/scrollcontainer/scrollcontainer.component.ts\" target=\"_blank\">Source code for this demo</a>"
}
[/block]