{"_id":"5b65b08eb1906e000319f871","project":"5707c6875309d117006948d4","version":{"_id":"5b65b08eb1906e000319f872","project":"5707c6875309d117006948d4","__v":0,"forked_from":"5aff027686c0a90003b923b4","createdAt":"2018-03-23T13:06:33.352Z","releaseDate":"2018-03-23T13:06:33.352Z","categories":["5b65b08eb1906e000319f854","5b65b08eb1906e000319f855","5b65b08eb1906e000319f856"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"8.0.0","version":"8.0.0"},"category":{"_id":"5b65b08eb1906e000319f855","version":"5b65b08eb1906e000319f872","project":"5707c6875309d117006948d4","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-04-08T14:56:07.661Z","from_sync":false,"order":1,"slug":"documentation","title":"Guides"},"user":"54d742a80771980d0052f4b5","githubsync":"","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-05-18T19:29:46.638Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":12,"body":"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.\nAlso, you can call `scrollIntoView` on any node to make it visible.\n[block:api-header]\n{\n  \"title\": \"Inner Scroll\"\n}\n[/block]\nAuto scrolling is built-in to the tree. Simply wrap the tree with a container that has a height and you're good.\nThe tree has an inner element called viewport that is scrollable.\n[block:api-header]\n{\n  \"title\": \"External Scroll (Scrolling as part of the body / other container)\"\n}\n[/block]\nSometimes you don't want to wrap the tree with a scrollable container, and want the scrolling to be part of a different element.\nUse the `scrollContainer` option for this purpose as described in [Options](doc:options-2) \n[block:api-header]\n{\n  \"title\": \"Demo of scrollContainer\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<iframe src=\\\"https://rawgit.com/500tech/angular-tree-component/master/example/cli/dist/#/scroll-container\\\" width=\\\"500px\\\" height=\\\"300px\\\"></iframe>\\n\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<a href=\\\"https://github.com/500tech/angular-tree-component/blob/master/example/cli/src/app/scrollcontainer/scrollcontainer.component.ts\\\" target=\\\"_blank\\\">Source code for this demo</a>\"\n}\n[/block]","excerpt":"","slug":"auto-scrolling","type":"basic","title":"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](doc:options-2) [block:api-header] { "title": "Demo of scrollContainer" } [/block] [block:html] { "html": "<iframe src=\"https://rawgit.com/500tech/angular-tree-component/master/example/cli/dist/#/scroll-container\" width=\"500px\" height=\"300px\"></iframe>\n" } [/block] [block:html] { "html": "<a href=\"https://github.com/500tech/angular-tree-component/blob/master/example/cli/src/app/scrollcontainer/scrollcontainer.component.ts\" target=\"_blank\">Source code for this demo</a>" } [/block]