How to Auto-Scroll to End of Div When Data Is Added

How to auto-scroll to end of div when data is added?

If you don't know when data will be added to #data, you could set an interval to update the element's scrollTop to its scrollHeight every couple of seconds. If you are controlling when data is added, just call the internal of the following function after the data has been added.

window.setInterval(function() {
  var elem = document.getElementById('data');
  elem.scrollTop = elem.scrollHeight;
}, 5000);

Scroll to bottom of div?

Here's what I use on my site:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

Keep overflow div scrolled to bottom unless user scrolls up

This might help you:

var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;

[EDIT], to match the comment...

function updateScroll(){
    var element = document.getElementById("yourDivID");
    element.scrollTop = element.scrollHeight;
}

whenever content is added, call the function updateScroll(), or set a timer:

//once a second
setInterval(updateScroll,1000);

if you want to update ONLY if the user didn't move:

var scrolled = false;
function updateScroll(){
    if(!scrolled){
        var element = document.getElementById("yourDivID");
        element.scrollTop = element.scrollHeight;
    }
}

$("#yourDivID").on('scroll', function(){
    scrolled=true;
});

How to scroll to bottom of div when new elements are added

this.$el

The root DOM element that the Vue instance is managing.

this.$el is the #messages div, there's no need to fetch it from the DOM.

Then, you could use this.$el.lastElementChild.offsetTop to get the last message and scroll to its top, so if it's long, you're not scrolling past its starting point.

Here, I simplified the template a little to make it straight to the point.

<template>
    <ul id="messages">
        <li v-for="msg in messages.slice().reverse()">{{ msg.message }}</li>
    </ul>
</template>

<script>
export default {
    name: 'messages',
    data() {
        return { messages: [] };
    },
    mounted() {
        this.getMessages();
    },
    updated() {
        // whenever data changes and the component re-renders, this is called.
        this.$nextTick(() => this.scrollToEnd());
    },
    methods: {
        async getMessages () {
            // ...snip...
        },
        scrollToEnd: function () {
            // scroll to the start of the last message
            this.$el.scrollTop = this.$el.lastElementChild.offsetTop;
        }
    }
}
</script>

If you really want to keep the <div> container, you could use a ref.

<template>
    <div id="messages">
        <ul ref="list">
            <li v-for="msg in messages.slice().reverse()">{{ msg.message }}</li>
        </ul>
    </div>
</template>

Then in the component, you can refer to it with this.$refs.list.

ref is used to register a reference to an element or a child
component. The reference will be registered under the parent
component’s $refs object. If used on a plain DOM element, the
reference will be that element; if used on a child component, the
reference will be component instance.

While Vue examples often use the native DOM API to get around, using ref in this instance is way easier.

scroll to the bottom of the content if some content has been added to the `div`

If you use

msgdiv.scrollIntoView(false);

it will keep the scroll view at the bottom of the element. (true would keep it at the top.)

Auto Scroll to Bottom DIV

When window load scroll your chat div at bottom using document.ready

DEMO

$(document).ready(function() {
    $('#chat-scroll').animate({
        scrollTop: $('#chat-scroll').get(0).scrollHeight
    }, 2000);
});

Scroll to bottom when new message added

This worked for me:

outputArea[0].scrollTop = 9e9; 

---

Related Topics