The autoscroll feature of an overflow element does not persist when additional elements are added

I am in the process of trying to automatically scroll an element to the bottom of a overflow:auto div whenever a new message is added to a list through jquery using .append

Initially, I managed to accomplish this with:

$(".content-wrapper").scrollTop($(".messages").children().height());

It successfully scrolled for the first two messages that were added. However, after running it for a longer time, it stopped autoscrolling.

You can find the JS Fiddle link here

Can anyone provide guidance on how to ensure that it continues scrolling after more than just the first two messages have been added?

Any assistance would be greatly appreciated! :)

javascriptjqueryhtmlcss

Answer №1

Make sure to retrieve the scrollHeight: $(".content")[0].scrollHeight

To update your code, use this:

$(".content-wrapper").scrollTop($(".content")[0].scrollHeight);

Check out the example on JSFiddle

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

Switch body class when the navbar's collapse show class is toggled

There are numerous methods to accomplish this task, but I am seeking the most optimal and efficient approach. My goal is to toggle a custom body class when the .navbar-toggle triggers the .show class on the .navbar-collapse element. I'm hesitant abo ...

javascriptjquerybootstrap-4

Is there a way to create this dynamic design without relying on JavaScript?

I am attempting to achieve a specific design without relying on JS, a demonstration can be viewed at jsfiddle.net/k2h5b/. Essentially, I want to showcase two images, both centered, one as the background and one as the foreground: Background Image: Shoul ...

htmlcss

Validation of the hidden subcategory field using jQuery is essential

I am struggling with implementing jQuery validation on a form that includes fields for title, category, subcategory, and message. While I have successfully added validation for all fields except subcategory, it just won't seem to work. I could really ...

javascriptphpjqueryformsvalidation

The blend of Combination and Advanced Timeline triggers a "ReferenceError: Highcharts is not defined" error

Replication Steps First, download HIGHCHARTS 4.1.9 from http://www.highcharts.com/download Next, open the file index.html Then, click on Combinations > Advanced timeline An error message is displayed in Firebug and the chart does not appear: Referenc ...

javascripthighcharts

Populating dropdown menu with data fetched from an AJAX request

I've created a dropdown in my cshtml page: @( Html.Kendo().DropDownList().Name("ddlCode").OptionLabel("Select Code...").BindTo(@ViewBag.dropDown) .DataTextField("Title") .DataValueField("domainCode") The dropdown is bound up ...

c#javascript.netajaxasp.net-mvc-4

Understanding Javascript array output / Breaking down URL hash parameters

Currently, I am working on extracting a single value from a URL String that contains three variables. The code snippet I am using for this task is as follows: var hash_array = location.hash.substring(1).split('&'); var hash_key_val = new Arr ...

javascriptarraysparsinghashsplit

Refreshing infinitescroll plugin with updated URL link upon clicking

I am facing a situation where I need to rebind the infinite scroll plugin when a link is clicked, passing a new URL to differentiate the content section that will be generated later by it. Currently, I am able to trigger the infinite scroll and pass the s ...

jqueryinfinite-scroll

Mechanize lacks the ability to handle cookies in the same way a web browser would

Here is the code snippet I'm working with: use WWW::Mechanize; $url = "http://daccess-ods.un.org/access.nsf/Get?Open&DS=A/HRC/WGAD/2015/28&Lang=E"; $mech = WWW::Mechanize->new(); $mech->get($url); $content = $mech->content(); while ( ...

htmlperlcookiesmechanize

Create a global SCSS file in ReactJS that stores all variables, mixins, and more

Looking for a solution to manage multiple components in your SCSS project efficiently? Consider creating a central file that houses all your variables and mixins, making them globally accessible without the need to manually import the file into every SCSS ...

javascriptreactjssassdirectory-structure

Utilizing AngularJs and Materialize.css to create numerous dropdown menus

I am encountering a troublesome issue that I just can't seem to resolve. My current setup involves using AngularJs to showcase a set of cards, each equipped with its own dropdown menu. Here's the snippet of code in question: <div ng-repeat=&q ...

javascriptcssangularjsmaterialize

The "as" property in NextJS Link does not properly reload the page when opened

I recently started using NextJS and I have a question about its router. I want to link to a page, but I would like the URL to be different. <Link href="/About/About" as="/about-page"> <a> Who We Are <im ...

javascriptreactjsnext.js

Warning in TypeScript indicating that a property is missing in one of the response types

I am handling a response like this: const response : { a : string, b : string } | { message : string } = callFunc(); When using it in my code, I have: response.message && doSomething(message); However, TypeScript is showing an error that ...

javascripttypescript

Refresh is required for resizing

My goal is to have 3 div elements scroll over each other, with their positions fixed when they reach the top. Everything works fine until the window is resized, requiring a page refresh. Is there a way to achieve this without refreshing the page? Using th ...

javascriptjqueryhtmlcss

The value displayed in the textbox becomes inaccurate when I click on different buttons

In my interface, there is a textbox that should display the number of selected buttons. The issue I am facing is that when the user selects buttons and adds them in a row, if they then select another set of buttons, the previously selected ones are also c ...

jquerydom

What is the best way to incorporate a hyperlink in a React project using Tailwind

I am working on a project using React and Tailwind CSS. I want to be able to redirect the user to the next page when they click on a link. I have tried using the <a /> tag, but I'm not seeing any noticeable difference between that and the <p ...

htmlreactjsnpmtailwind-css

Having a slight hiccup with pixel alignment and browser compatibility in my jQuery animation

To emphasize a specific paragraph element, I developed a JavaScript function that displays it above a darkened background. My approach involved using jQuery to generate an overlay and then duplicating the targeted paragraph element while positioning it ab ...

javascriptjquerycssxhtml

Tips for avoiding accidentally selecting nearby text while holding down a button on your mobile device

My application requires the user to press and hold a button to record audio. However, on mobile devices, when the user holds the button, the browser attempts to select nearby text due to finger pressure. While this behavior is understandable, I want to pre ...

javascripthtmlcssreactjsmaterial-ui

Different ways to update the AutoComplete Style attribute

MuiInput-formControl { margin-top: 16px; Is there a way to reset the marginTop property to zero? I attempted the following method, but it was not successful. MuiFormControlLabel: { marginTop: 0, }, <Autocomplete disabl ...

csstypescriptmaterial-uiautocompletestyles

Adding content to a div using JQuery

<body> <div id="scrollup"> <div class="link"> <br><a href="http://www.google.com/">Google1</a> <br><a href="http://www.yahoo.com/">Yahoo</a> </div> <div class="link"> <br><a href="h ...

jqueryappend

Changing the color of faces in Three.js: A beginner's guide

I am struggling to modify the color of a specific face on a mesh within a WebGL environment. While I can successfully change the entire mesh color, I am unable to target and update an individual face. The relevant code snippet can be found below: // Updat ...

javascriptthree.js