0

I'm trying to make some sort of console in my vue app. I already managed to scroll down when new elements get added to the ui console (just a element with a list of entries) by using:

watch: {
  uilogs: {
    handler: function() {
      // if last not in view and no focus on scrollbar detected, continue:
      this.$nextTick(() => {
        Array.from(document.querySelectorAll('#uiconsole > div'))
             .pop()
             .scrollIntoView();
      })
    }
  }   
}

I need the watcher because vue has to update the ui after adding a new element to the list before scrolling to that last element. Otherwise it would not be in the ui and I would not be able to scroll to it.

The problem

I dont want it to scroll if user uses the scrollbar to scroll up (to check some of the console entries above). I do not know how to achieve that. I already tried detecting if the scrollbar is at bottom, if it isn't at bottom => I wouldnt scroll to the last element. But I did not manage to do that.

Any ideas? Here's my app: https://gitlab.com/omeldar/advent-of-code

CBroe
  • 91,630
  • 14
  • 92
  • 150
Eldar Omerovic
  • 108
  • 12
  • https://stackoverflow.com/a/34550171/1427878 – CBroe Dec 02 '21 at 11:15
  • I saw that pos tthat post does not work for me. Not quite sure why but it seems to just not scroll at all. – Eldar Omerovic Dec 02 '21 at 11:23
  • The point was mainly about the formula; not sure if implementing it in an additional scroll event handler makes sense for what you want here, it should rather be added as a condition in what you have already shown above. – CBroe Dec 02 '21 at 11:27
  • Yeah I have tried implementing it as a condition to only scroll if it is at bottom. But it did not work and I have looked into it with two other devs (friends of mine) and they both couldn't figure out why it didn't work. But it doesnt matter anymore. I've stopped working on that project. Thanks for trying to help tho. – Eldar Omerovic Dec 02 '21 at 11:42

0 Answers0