I am looking to implement an autoscrolling log feature on my webpage that is dynamically fetched from a REST endpoint. To handle the potentially large size of this log, I decided to use vue-virtual-scroll-list. Additionally, I wanted the log to automatically scroll to the bottom unless manually scrolled upwards, in which case I wanted the scroll position to be maintained. This functionality was achieved using vue-chat-scroll. However, after reaching a certain number of entries, the scrollbar became unstable and no longer synced with the content or auto-scrolled to the bottom.
Vue.component('log', {
data: function() {
return { msgs: [] }
},
props: {
id: { type: String, required: true },
length: { type: Number, required: true },
refreshRate: { type: Number, default: 1000 }
},
template:
'<virtual-list :size="40" :remain="length" class="list-unstyled" :ref="id" v-chat-scroll="{always: false}">\
<li v-for="msg in msgs" :key="msg.id" :class="logColor(msg.severity)">\
<pre>[{{ shortTimestamp(msg.timestamp) }}]: {{ msg.message }}</pre>\
</li>\
</virtual-list>',
methods: {
fetchLogs: function(){
var session = this.id;
var start = -this.length;
if (this.msgs.length > 0)
start = this.msgs[this.msgs.length - 1].id;
var vue = this;
$.post(getUrl("/sessions/" + session + "/log"), JSON.stringify({
start: start
})).then(function(data) {
for(var msg of data){
vue.msgs.push(msg);
}
});
},
shortTimestamp: function(time) {
var fulldate = new Date(time);
return fulldate.toLocaleTimeString();
},
logColor: function(severity) {
switch (severity) {
case "Trace":
return "list-group-item-light";
case "Debug":
return "list-group-item-dark";
case "Information":
return "list-group-item-info";
case "Notice":
return "list-group-item-primary";
case "Warning":
return "list-group-item-warning";
case "Error":
return "list-group-item-danger";
case "Critical":
return "list-group-item-danger";
case "Fatal":
return "list-group-item-danger";
}
}
},
mounted: function() {
setInterval(function () {
this.fetchLogs();
}.bind(this), this.refreshRate);
}
})
Is there any solution to rectify this issue?