Scrolling to the latest message in Vuejs when a new message is received

I am currently working on a chat application, but I am facing an issue with scrolling to the bottom when new messages are received. I have attempted both methods:

document.getElementById('msg_history').scrollTop = document.getElementById('msg_history').scrollHeight

and

this.$refs.msg_history.scrollTop = this.$refs.msg_history.scrollHeight

However, the scrollTop value remains unchanged and the scroll does not move to the bottom.

Here is the link to my code: https://codepen.io/c7n/pen/xxKroNY

Thank you, Chung Tran

javascriptvue.js

Answer №1

Make sure to encapsulate your code within a nextTick(() => {}) function like so:

  this.$nextTick(() => {
     document.getElementsByClassName('msg_history')[0].scrollTop = some value;                      
  })

By doing this, it will ensure that the code waits until all rendering processes are completed. Check out the method for calculating the top location below:

How to keep a scrollbar always at the bottom?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on updating various states using React Hooks

Creating a background component with the use of Vanta in NextJS, here's the code snippet: import { useEffect, useRef, useState } from "react"; import * as THREE from "three"; import FOG from "vanta/dist/vanta.fog.min"; im ...

javascriptreactjsreact-hooksnext.js

Strategies for breaking apart a large, monolithic Node.js JavaScript application

My node.js server application is expanding, and I am looking to split it into multiple files. Below is a snippet of the current monolithic server.js file: var express = require('express'); var app = express(); // other initialization code etc / ...

javascriptnode.js

The curious case of unusual behavior in jQuery's livequery() method

When attempting to use the jQuery plugin "livequery" to highlight certain words within dynamically generated search results, the highlighting does not appear to work! Strangely, adding an alert() function before executing the code causes the highlighting ...

javascriptjquerylivequery

Draggable resizing of the Accordion component in React.js using Material-UI

In the visual representation, there are two Accordions—one positioned on the left (30%) and the other on the right (70%). Upon clicking the button, the right accordion disappears, while the one on the left expands to cover the full width (100%). A featu ...

javascriptreactjsmaterial-uiaccordiondraggable

What is the best way to transfer Flow type properties from one React component to another?

I'm in the process of developing a component that will wrap another component known as Button. The tricky part is that the library where Button is defined does not expose the type of its properties. In order to properly assign types to my component, ...

javascriptreactjsflowtype

(Typescript) The 'window' property is not present in the 'Global' type

Currently, I am utilizing Mocha/Chai for unit testing and have decided to mock the window object like so: global.window = { innerHeight: 1000, innerWidth: 1000 }; As expected, TSLint is raising an issue stating: Property 'window' does not ex ...

javascriptnode.jstypescript

- "Utilizing the _underscore loop within a design framework"

I am encountering a persistent error while working on this. Specifically, I keep receiving an error related to syntax: syntax error var _p=[],print=function(){_p.push.a... ');}return __p.join(''); <script id="product" type="text/t ...

javascriptunderscore.js

Issue with Vue.js: While the fade out feature is functioning correctly when using v-show, the fade in functionality

Upon following the documentation found here, I have implemented v-show along with a transition element: https://v2.vuejs.org/v2/guide/transitions.html The fade out animation functions correctly; however, when toggling the visibility of the element to mak ...

vue.jsvuejs3

The database powered by Postgresql performs flawlessly when it comes to updating data with accurate code execution. However, there seems to be an

Imagine a zoo with a postgresql database. To enable web access to this database, I am using php and javascript. Most of the web pages are working fine, but I am currently working on a page where clients can add or remove animals from existing exhibits. T ...

javascriptphphtmlpostgresql

Guide on sharing Photo Blogs on Tumblr using the "tumblr.js" NodeJS module

I've been using the tumblr.js node module to interact with the Tumblr API, but I'm having trouble understanding what exactly should be included in the "options" when posting on my blog. So far, I've only used this module to retrieve my follo ...

javascriptnode.jsmoduletumblr

Adding default parameters in AngularJS Route-UI is a useful feature for setting up

Using angular UI-Router in my app, I've set up my base language as English. I have both English and Hebrew locals, and I want to avoid adding parameters to the URL if the language is English. For instance: Home English --> http://example.com/ ...

javascriptangularjsangular-ui-routerangular-ui

The only thing visible on my project is the homepage, void of any buttons or additional pages

After completing this school project, I believed that everything was done correctly. However, as I faced issues with the code, I decided to seek help and share my app.js and bin section for clarification. Starting it with npm on the localhost as shown in ...

javascriptnode.jsexpress

Transmit information using jQuery to an MVC controller

I am developing an ASP.NET MVC3 application and need to send three pieces of data to a specific action when the user clicks on an anchor tag: <a onclick='sendData(<#= Data1,Data2,Data3 #>)'></a> Here is the javascript function ...

javascriptc#jqueryasp.netasp.net-mvc

Using .htaccess for a 301 Redirect

I am currently working on setting up 301 redirects, and regardless of whether I implement the redirect in .htaccess or use a meta or javascript redirect, they all seem to be working. However, there is an issue where the old URL or directory is being append ...

javascript.htaccesshttp-redirectmod-rewrite

Creating a resizable SVG rectangle element with React

Hey, I'm a beginner in Svg and currently learning ReactJs. I have a question that I'm not sure is possible or not. I have an Svg element with its children wrapped inside a g. The g element contains a rect element that I want to make resizable usi ...

javascriptreactjssvg

The dynamic concatenation of Tailwind classes is failing to have any effect, even though the full class name is being

I'm currently using Tailwind CSS within my Next.js project and I have a common method that dynamically returns the desired background color. However, despite adding the full class name, the background color is not displaying as expected. After reading ...

javascripttypescriptnext.jstailwind-css

Is there a way to simulate a click event within a Jasmine unit test specifically for an Angular Directive?

During the implementation of my directive's link function: $document.on('click.sortColumnList', function () { viewToggleController.closeSortColumnList(); scope.$apply(); }); While creating my unit test using Jasmine: describe(&apo ...

javascriptangularjsunit-testingjasmine

Increasing values are applied to the text field when it is clicked or focused on

I have a grid with 18 rows of text fields, each requiring a unique ID. The bottom row may need ID 1 while the top row could need ID 15, depending on user choices. It doesn't have to be aesthetically pleasing, function is what matters. I plan to use th ...

javascriptjquery

Retrieving information from a function beyond the scope of Mongoose

I am currently facing an issue with my function in which I need to return the Mongoose query data so that I can use it. However, I am only able to access the sum within the .exec function. How can I manage to retrieve the sum value outside of this functi ...

javascriptnode.jsmongodbmongoose

Tips for retrieving the MenuItem name upon click event using Menu and MenuItem components in Material UI React

Utilizing MaterialUI's Menu and MenuItem components in a React project, I am looking to display the name of the menu item upon clicking on it. Upon inspecting event.currentTarget in console.log, it returns the entire list item: ListItem Image attache ...

javascriptreactjs