unable to simultaneously scroll two elements

Within the realm of reactjs, I've crafted a function that smoothly scrolls elements by utilizing a useRef:

 ref.current?.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "center",
    });

An interesting observation is that when multiple calls to this function are made simultaneously on different elements, only the first called element actually undergoes scrolling.

This raises the question - can multiple elements be scrolled at once?

If indeed achievable, what errors might I be committing unknowingly in my code?

javascripthtmlcssreactjsdom

Answer №1

Using scrollIntoView will only trigger the scrolling operation for the first element because a browser can handle only one scroll at a time.

If you are facing this problem, an alternative solution is to use window.scrollTo as shown below:

const scrollToElements = (refs) => {
  refs.forEach((ref) => {
    const rect = ref.current.getBoundingClientRect();
    window.scrollTo({
      top: rect.top + window.scrollY,
      left: rect.left + window.scrollX,
      behavior: "smooth",
    });
  });
};

I hope this solution helps!

Answer №2

Indeed, it is correct. If you invoke scrollIntoView on numerous elements, only the final scroll may be visible since the browser manages one scroll at a time. To remedy this situation, simply insert a brief pause between each scroll.

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

Obtaining the current bitcoin price from the Bitstamp exchange is a simple

I am trying to display the current bitcoin price using Bitstamp, but there are multiple exchanges available. I specifically want to retrieve the price from Bitstamp only, however, the positions of exchanges keep changing making it difficult to isolate Bits ...

javascriptjqueryjsonbitcoin

Stop AngularJS $http promise from fetching cached JSON data

During the signup process of my AngularJS application, I continuously update a user object. Instead of creating separate controllers for each signup step, I have opted to use one controller for all steps as the logic is quite similar and it helps keep the ...

javascriptjsonangularjsangular-promiseangular-http

Child object in Three.js does not inherit transformation from its parent

Consider a scenario where there is a main object with multiple child objects in a given scene. Update: Here is the code snippet for creating a mesh (assuming the scene and camera are already set up). Code snippet for creating the parent group: var geome ...

javascriptmatrixthree.jstransform

What is the process for generating a unique show page based on the clicked item's ID?

As I work on creating a list of items using the .map function, I aim to render each item along with additional details on a single page. import React from 'react' import {faArrowRight, faMusic, faPlay, faPlayCircle, faTachometerAlt} from "@f ...

node.jsjsonreactjsgraphqlgatsby

Issues with Bootstrap loading correctly within a Ruby on Rails application

What steps should I take to successfully load Bootstrap 4 on my web app? Here is the contents of my Gemfile: gem 'rails', '~> 5.1.5' gem 'devise' gem 'bootstrap-sass', '~> 3.3.7' gem 'sass-rail ...

htmlcssruby-on-railsbootstrap-4

Updating an image source using JavaScript without relying on a default image source specified in the HTML code

Struggling to change the image source path using JavaScript? Want to change the page color randomly after each load? I created SVGs in different color types - blue, red, yellow... but can't get it to work. The path seems correct when tested normally i ...

javascripthtmljqueryimagebackend

The communication between Node.js Express and the front end is experiencing synchronization issues

I'm facing an issue where a property is mysteriously disappearing when I try to send an object from my nodejs server to the front end. server router.post('/cart/retrieve', (req, res) => { let cart = req.session.cart; let prodId ...

javascriptnode.jsexpress

json success function not being triggered

I am facing an issue with executing the success function in my code while trying to post the value of an input box and retrieve the value of a checked radio button. The objective is to perform a query based on which radio button is checked. Here is the HT ...

phphtmljquery

Some Android devices experience unusual behavior with inlined icon links

Check out this small jsFiddle: <html> <head> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <style> .navButton { font-size:30px; height:43px; ...

androidhtmlcssiconsfont-awesome

Bringing a .json Model into Three.js

Exploring Three.js for the first time and struggling with importing a .json model obtained from Clara.io For instance, I have downloaded this model: However, I can't seem to understand how to embed it into an HTML file. :( I attempted the following ...

javascriptjson3dthree.js

Ways to make logo image go over/out of header

I am attempting to create a design where the logo image extends beyond the header and into the content as you scroll, giving the impression that the logo is oversized for the header and protruding from the bottom. Visit the website: For an example of a s ...

css

The code coverage for the "rendering expectations" test in a particular component is insufficient

In order to test a specific component in my application, I am utilizing react-test-render. The test is intended to ensure that the component renders properly. Despite defining all the necessary properties for the component in the test file, the test cover ...

javascriptreactjsunit-testingjestjsenzyme

Incorporate Unicode characters into the structure of an HTML tag

I'm having an issue with the C# script below that is supposed to remove HTML tags from a description column in SSIS. I attempted to include the unicode value &#58 in the htmlTagPattern string, but it's not working as expected. Any help would ...

c#htmlsql-serverssisetl

Achieve data synchronization between two arrays using AngularJS

Utilizing AngularJS (with ng-table), I am working on creating and synchronizing two arrays. In both tables, I have [A, B, C] values and my aim is to keep them synchronized. For instance, if I filter the first array with "A", I expect to see only [A] in the ...

javascriptangularjsngtable

What is the process for converting text into tags?

<text style={{ letterSpacing: '30', wordBreak: 'keep-all', }} > {value.content} ...

javascripthtmlreactjs

Suggestions for this screenplay

I am completely new to the world of coding and computer languages, and I could use some guidance on how to utilize this script for a flash sale. setInterval(function() { var m = Math.floor((new Date).getTime()/1000); if(m == '1476693000000& ...

javascriptdom-events

How can I incorporate margins or adjust scaling within dompdf?

After creating a PDF using dompdf with the paper size set to A6, I am experiencing issues when trying to print it on A4 and letter paper sizes. The left and top borders are being cut off. Is there a way to generate a PDF that is compatible with A4, A6, l ...

phphtmlcssmagentodompdf

Unable to drag and drop functionality is not functioning properly in Android Emulator with Html and jQuery

As a newcomer to Android, I have successfully created a project in HTML that runs perfectly as intended. However, when trying to run this HTML project on an Android emulator, I encountered an issue with drag and drop functionality not working. I utilized ...

androidhtmljquery

php code to paginate mysql results

Imagine I have 50 rows in my database. How can I retrieve MySQL results in pages, displaying 5 results on each page and showcasing the pages as follows: [1], 2, 3, 4...10? For example, if it's on page 5, show 3, 4, [5], 6, 7...10 without refreshing al ...

phpjavascriptjquerymysqlajax

The issue of Jquery selectors not functioning properly when used with variables

Currently working on a script in the console that aims to extract and display the user's chat nickname. Initially, we will attempt to achieve this by copying and pasting paths: We inspect the user's name in the Chrome console and copy its selec ...

javascriptjqueryhtmlvariablesselector