Always Scroll to bottom

[creativenoobie]

Hey,

I'm using this plugin like this:

<perfect-scrollbar id="content---window" class="scrollbar grey" :style="computeHeight">
                <content />
<perfect-scrollbar>

with following script:

export default {
    data () {
      return {
      }
    },
    mounted () {
       let objDiv = document.getElementById("content---window");
      objDiv.scrollTop = objDiv.scrollHeight;
      console.log(objDiv.scrollHeight) //Logs output: 723
    },
    computed: {
      computeHeight () {
        let height = '';

        if(this.$vuetify.breakpoint.smAndDown)
          height = 'calc(100vh  - 36px - 64px - 80px)';
        else
          height = 'calc(100vh  - 36px - 48px - 64px - 80px)';

        return {
          height: height
        };
      }
    }
}

Now, here's the problem, Although objDiv.scrollHeight is 723, I'm unable to scroll down to bottom of the div.

I've tried multiple answers on stackoverflow: https://stackoverflow.com/questions/19418087/jquery-perfect-scroll-set-scrollbar-to-the-bottom-of-the-container https://stackoverflow.com/questions/270612/scroll-to-bottom-of-div

None of them is working for the plugin. Can you help me with this?

[creativenoobie]

I just solved this one.

scrollDown() {
        let objDiv = document.getElementById('chat-window');
        this.$nextTick(() => {
          objDiv.scrollTop = objDiv.scrollHeight;
        })
      },

seems to do the trick.