How scroll end page with vue js

Question

How do I scroll to the bottom of the page?

scroll(){
    let container = this.$el.querySelector('#scrollingChat')
    container.scrollTop = container.scrollHeight
}

I'm doing this, and always calling my api answers, but it does not go to the bottom of the page

Solution 1

window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);

This is will instantly scroll to the bottom of any page.

Solution 2

If you create an anchor in your page like so:

<div id="top"></div>

you can use:

let elmnt = document.getElementById('top');
elmnt.scrollIntoView(false);

This page explains what the different alignment parameters do for scrollIntoView:

true - scrolls to top of element

false - scrolls to bottom of element

default it true

https://www.w3schools.com/jsref/met_element_scrollintoview.asp

Solution 3

window.scrollTo(0,document.body.scrollHeight);

or you can use smooth scroll: https://github.com/alamcordeiro/vue-smooth-scroll

Comments

[James Harrington]

No problem. I know its not "Vue-ish" but it gets the job done

[James Harrington]

If you want it to be smooth you could also use requestAnimationFrame and window.scrollTo(0, i) with some recursion magic :) happy coding