When is the scrollHeight determined?

I'm currently working on implementing a CSS transition within an accordion element that I am creating with Angular 7. To ensure proper display of the content inside, I have opted to use overflow-y: visible; as I will not be using this element personally.

Due to the use of overflow, I find myself referencing max-height instead of height for my transition effect. Some sources suggest setting the max-height to a significantly high value in order to accommodate for the overflow. However, this can result in awkward animations depending on the content.

To address this issue, I considered dynamically setting the max-height based on the actual content height after the element is rendered and populated. While it does work using a setTimeout within ngAfterViewInit(), there seems to be a delay in calculating the scrollHeight.

This led me to wonder if there is a specific point when the browser calculates the scrollHeight and if there is a way to capture that event without relying on arbitrary time values with setTimeout().

Just exploring this conceptually, no need for specific code examples here. Appreciate any insights you may have. Thanks!

javascriptangulartypescript

Answer №1

When changes are made to DOM elements, they do not take effect immediately. Instead, all the changes within a single execution cycle are gathered and applied in one repaint process.

Therefore, it is important to wait for the repaint to finish before attempting to access the updated dimensions of the element.

One way to ensure this is by using the requestAnimationFrame method, which runs before each repaint. By structuring your code like this:

element.style.display = 'block';
requestAnimationFrame(() => console.log(element.scrollHeight));

You can guarantee that the callback function will be executed before the next repaint, allowing you to retrieve the most recent scrollHeight value.

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

Injecting dependencies in AngularJS when utilizing the controller-as syntax: A how-to guide

As I dive into the controller-as feature outlined in the documentation, I'm refining one of my controllers to align with their recommended syntax. However, I'm facing a challenge when it comes to injecting the $http service into my search() funct ...

javascriptangularjs

What is the best way to retrieve the root path of a submodule?

My main module has a submodule with its own routing. The Main Module is loaded lazily when the user visits the URL /show: const routes: Routes = [ { path: 'show', loadChildren: './show/show.module#ShowModule' } ]; How can ...

angularangular2-routing

How can you show the default calendar for a specific month and year in a Vue3 datepicker?

I've been utilizing the @vuepic/vue3datepicker component, which automatically shows the days of the current month when integrated in my project: <template> <VueDatePicker v-model="date" inline></VueDatePicker> </templ ...

javascriptvue.jsvuejs3vuepic-vue-datepicker

Angular 11 issue: Unable to display image on the webpage

When I try to view my image by directly using the URL in the src tag, it works fine. However, when I attempt to load it dynamically, an error is thrown. Even using [src]="img.ImagePath" method gives me the same response Here is the error logged ...

angularangular11

What are the best ways to incorporate a theme into your ReactJS project?

Looking to create a context for applying dark or light themes in repositories without the need for any manual theme change buttons. The goal is to simply set the theme and leave it as is. Currently, I have a context setup like this: import { createContext ...

javascriptreactjstypescriptnext.js

I am looking to create a software application that can calculate and provide the correct combination of notes and coins as change for a customer

I am currently developing a program that is intended to provide customers with their change along with the breakdown of notes and coins required for the change. The program functions correctly when the bill amount exceeds the cash amount (it displays an e ...

javascripthtmlarrays

jQuery Dialog interface endlessly scrolls to the top

While debugging code for a project, I came across the use of jquery UI Dialog for popups. However, there seems to be an issue where the page keeps scrolling to the top while the dialog remains stationary wherever it was opened. Below is the code snippet in ...

javascriptjqueryjquery-uijquery-ui-dialog

When utilizing a Private Signed URL or Public URL from AWS S3, the Model Viewer for web fails to display the View in AR button

I integrated ModelViewer 1.9.2 by Google into my Angular project to display 3D models with surface detection for object augmentation. Initially, I successfully augmented 3D models from the application's assets. However, I'm facing issues when try ...

angularamazon-s3augmented-realitymodel-viewerweb-ar

Exposing the secrets of the Ajax module

Here is the code snippet I am working with: my.data = function () { var getAuth = function (userName, password) { var model = JSON.stringify({ "UserName": userName, "Password": password }); var result; $.ajax({ url: m ...

javascriptjqueryajaxoop

Filtering an Array of Objects on the Fly in Vue.js

I'm currently working on a Vue.js app where I need to dynamically apply filter values to an Array of objects based on their field values. Each object in the Array has various fields that I want to filter by. The challenge is that each field can have m ...

javascriptvue.js

Exploring the functionality of multiple index pages in angularjs

I am trying to access the localhost:3000/admin which is located in my views. The index.html and admin.html are two separate base files, one for users and the other for the admin dashboard respectively. Here is a snippet from my app.routes.js file: angul ...

javascripthtmlangularjsangular-routing

Exploring the Fundamentals of XSS

Currently, my technology stack consists of Symfony2, Twig, and Doctrine. When it comes to securing my website, I am particularly concerned about preventing XSS attacks. However, despite taking precautions, I'm not sure what more I can do. Persisten ...

phpjavascriptsymfonyxss

Using a key as an argument in the `map` function invocation

I keep getting a warning message stating that each child in the array does not have a unique key. const ITEMS = [ { "name": "apple", displayName: "Apple" "name": "orange", displayName: "Orange" }, { "name": "banana", di ...

javascriptreactjs

Get the shared elements from several arrays with JavaScript

Find the shared value of 12 from the given array For example: If the input is as follows: [ [12, 6],[12, 11, 9, 8, 1],[12, 11, 9, 8, 6, 1],[12, 11, 9, 8, 6, 1],[12, 11, 9, 8, 6, 1] ] The expected Output should be : [12] ...

javascripttypescript

Clicking the button will remove any previously applied CSS style using jQuery

Is there a way to remove the background color that was applied to a previously clicked button when clicking on another button? The current code successfully changes the background color of the clicked button upon hover, but it doesn't reset or remove ...

javascripthtmljquerycss

Oops! Looks like there was an issue finding a matching route for the URL segment in Angular 2

I am currently exploring angular2 and trying to figure out how to incorporate multiple <router-outlets> in a specific template. Despite searching through numerous Q&A, I have been unable to resolve the issue. router.module.ts const routes: Routes = ...

angularangular2-routing

What steps should I take to correctly identify the type in this specific situation?

Let's consider the function f, defined as follows: function f<T extends Fields = Fields>(props: Props<T>) { return null; } In this context, T represents a generic type that extends Fields. The concept of Fields is captured by the follow ...

typescriptgenericstype-inference

Steps for building an API to connect to our proprietary database using the WSO2 API manager

Currently, I am looking to share my data from my personal postgresql database by creating an API. In this case, I plan on utilizing the WSO2 API manager for the process. I am uncertain if I am proceeding in the correct manner, so any advice on the differe ...

javascriptjsonapiwso2wso2-esb

Unable to configure node and express for file serving

Currently using Windows 7, I have successfully installed nodes 0.10.12 and the latest versions of express and express-generator globally. I then proceeded to create a new express project called nodetest1 and installed all dependencies using npm install. U ...

javascriptnode.jsexpress

How can esbuild be used to load .wglsl files in Typescript files?

I'm currently utilizing esbuild to bundle my Typescript code, but I'm facing a challenge with configuring a loader for ".wgsl" files. Here is my app.ts file: import shader from './shader.wgsl'; //webgpu logic This is my shader.d.ts fi ...

typescriptshaderesbuildwebgpu