Q-tree: Is it possible to add a scrollbar?

[CWoodman]

I have a dynamically built tree with multiple levels. User can expand all or collapse all using buttons. If expanding the tree makes it longer than the page, I’d like to show a scrollbar.

And if that’s possible, I’d also like a way to ensure a selected node is visible by auto-scrolling to show it.

I tried this but it doesn’t work…

<q-scroll-area>
  <q-tree
    .....
  />
</q-scroll-area>

I know I can have the whole page scroll, but I want to keep the top toolbar visible while the tree scrolls. I also have another panel beside it with related information which should not scroll with the tree.

[CWoodman]

Found a way to do it, but probably a better way. Anyway here’s what works for me…
In the template:

<div id="treeScroll" class="scroll overflow-hidden">
   <q-scroll-area :style="treeHeightStyle">
       <div class="q-px-sm">
          <q-tree
               ....
          </q-tree>
       </div>
    </q-scroll-area>
</div>

And in the script:

mounted () {
  window.addEventListener('resize', this.setTreeHeight)
  this.setTreeHeight()
},
destroyed () {
  window.removeEventListener('resize')
},
methods: {
  setTreeHeight () {
    const treeTop = document.getElementById('treeScroll').offsetTop
    const treeHeight = window.innerHeight - treeTop
    this.treeHeightStyle = 'height: ' + treeHeight + 'px'
  }
},
data () {
  return {
    treeHeightStyle: '',
    ...
}

If anyone has a better approach, let’s hear it. Otherwise, maybe someone else will benefit from this post.
Still haven’t figured out how to ensure the selected tree item is visible.