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