q-Tree auto-scroll to last node



  • I have a dynamic tree that is auto-building its nodes when it receives a data.
    After creating like 20 nodes, my display remains at the first node while I have to scroll down on my app page to see the end of the tree.
    Is there any way that after a tree is built, the tree auto-focus to the last node?



  • Could this be scroll-observer instead?



  • @studio511 yeah I think using observers is the right way to do it !

    Can you post your code of the dynamic q-tree replaced by dynamic lorem ipsum ?

    Ps : after thinking 30 seconds, observer is an observer so no you can’t do it with it.

    I have found the property scroll-target of the q-virtual-scroll.
    Maybe you could dynamically create and id to the last html element and del the last one when you create a new tree element. Then scroll-target to it.
    Or simply create an empty div/span with end id, but maybe it could create weird display.
    Or you could using the last element of a class you created for it.

    There’s also Scroll position

    When I’ll be on my computer, I’ll try few stuff, that’s if you can share me the code it will be cool !



  • hi @yo currently i’m not using the scroll component, the scroll bar was self-created when the page gets extended so when that happens, a class = ‘q-panel-scroll’ got created…
    So I’ll thinking if I really needed to include a scroll component in order to control it…
    and regarding the dynamics of q-tree, conceptually, I created a computed property to watch the nodes. managed by a delay, I updated the nodes every few seconds and the tree rebuilds itself when it receives the updated nodes



  • If you don’t want to use a scroll area you can do a dom search to get the scroll area inside your page, then you add a ref argument called ‘myScroll’ (if doesn’t exist yet), then do this after adding a new tree element (if the scroll exist) :

    this.$refs.myScroll.setScrollPosition(999999)
    

    Maybe it won’t work cause ref depending on Vue, then use a common Dom id to get the element.

    But I don’t think dom manipulation works for mobile (maybe I’m wrong)



  • @yo thanks mate! I think you just simplified my problem. I was thinking too deep into how I could control the scroll position until your suggestion. Yes it works for me now. Defaulting the scroll position at the end really worked 🙂



  • @studio511 you’re welcome 😉


Log in to reply