center the view on the specified element

Utilizing ReactJs, I am developing a horizontal timeline that showcases dates.

For instance, there is a list of 100 elements, each containing a date and text content.

The dates are displayed horizontally using flex-direction="row" and overflowX: "auto", while the content with date + text content is displayed vertically with styled formatting.

https://i.sstatic.net/JNkuR.gif

When clicking on a date in the "horizontal date TimeLine," the page automatically scrolls to the corresponding content using an anchor link (not shown in the provided gif). As the page is scrolled over the contents, the related dates in the "horizontal date TimeLine" turn red to indicate the current position.

The issue lies in wanting to center or scroll to the "current date" (e.g. '02/07') within the "horizontal date TimeLine." Currently, manual horizontal scrolling is required.

I'm unsure how to achieve horizontal scrolling inside the overflowed div without utilizing an anchor. Any tips on accomplishing this by referencing element's index or id would be greatly appreciated. Thank you!

javascripthtmlcssreactjs

Answer №1

After doing some searching, I stumbled upon a straightforward fix using the scrollIntoView method.

 var targetElement = document.getElementById(id);

    if (targetElement) {
      targetElement.scrollIntoView({behavior: "smooth", block: "nearest", inline: "center"});
    }

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

React Router - Implementing a <Redirect> element rather than a list of child components

Here is the code snippet I am working with: import { Redirect } from 'react-router-dom'; import QPContent from '../QPContent'; class AnswerContainer extends Component { constructor(props) { super(props); this.state = { ...

javascriptreactjsreact-router

transferring JSON information to a template in a NodeJs application

Currently, I am performing some filtering on my JSON data and storing the result in a variable called driver. The driver variable contains JSON data that I want to pass unchanged to the view. My main query is: How can I effectively send the data stored i ...

javascriptnode.jsexpress

Include a photo in the notification when utilizing the sendToTopic function

I am looking to utilize the sendToTopic method for sending notifications to a topic. Is there a way to include an image in the notification? It seems that notification.imageUrl is not available as an option. ...

javascriptnode.jsfirebase-cloud-messaging

The RouterView component seems to be malfunctioning within the Vue project

I recently started working on a vue-project where I created a Home page with a sideBar component and a routerView component. Here's a preview: When clicking on any sidebar item, the router navigates to the corresponding path defined in the navigateT ...

javascriptvue.jsroutesvuejs2

How can I retrieve console log information in POSTMAN when a test fails?

Having an issue with this test. I am trying to trigger a console.log when the installment value in my JSON is less than 100 (resulting in a test FAIL). However, I am receiving both PASS and FAIL results in the test, but no information is showing up in th ...

javascriptjsonfor-looptestingpostman

Blurring images with a combination of jQuery Backstretch and Blurjs

I have a background image displayed using Backstretch and want to apply Blur.js to blur elements on top of it. However, when I try to use Blur.js on the backstretched image, it doesn't work. I believe this is happening because Blur.js uses the CSS pro ...

javascriptjqueryhtmlcss

How can the dependencies object be extracted from the package.json file in an Angular project?

Scenario: I am managing multiple Angular applications within the same project. Whenever I need to upgrade an npm package, I find myself having to manually update the package.json files in each application. While I attempted a mono repo approach, it did not ...

javascriptnode.jsangularnpmpackage.json

What could be causing my divs to overlap?

I recently started coding and I'm facing an issue with my <header> and <section> divs overlapping each other. I was under the impression that being block elements, <section> should be displayed below <header>. Any suggestions o ...

htmlcss

Symfony/encore requires devDependencies in order to successfully compile

My experience with Symfony5 and encore has been smooth until I attempted to deploy to production. In order to install dependencies, you can use the command npm install --production. To compile, run npm run build --prod. I encountered an issue when trying ...

javascriptnpmwebpack-encorenpm-build

Adjusting canvas context position after resizing

I've been experimenting with using a canvas as a texture in three.js. Since three.js requires textures to have dimensions that are powers of two, I initially set the canvas width and height to [512, 512]. However, I want the final canvas to have non-p ...

javascripthtmlcanvasthree.js

Issue: Database not updating after input via AJAXExplanation: Despite submitting new data through AJAX, the

I've been struggling to display the UPDATED database on my initial html page after submitting new information. Despite successfully updating the database using AJAX, I can only see the outdated version. Any assistance in resolving this issue would be ...

javascriptphpjqueryajaxdatabase

How to change a specific value in an array of objects using React

Within my array, I have objects containing the fields id and title const cols = [ { id: 0, title: "TODO" }, { id: 1, title: "InProgress" }, { id: 2, title: "Testing" }, { ...

reactjstypescript

Incorporate the gsap node package into your Meteor project for dynamic

Currently, I am attempting to utilize the 'gsap' node module, specifically the tool 'Draggable', in conjunction with Meteor (a standard Meteor React application). The installation process using meteor npm install gsap is successful wit ...

node.jsreactjsmeteornpmgsap

Personalized context hook TypeScript

I have been experimenting with a custom hook and the context API, based on an interesting approach that I found in this repository. However, I encountered an error when trying to use it with a simple state for a number. Even though I wanted to create a mo ...

reactjstypescriptreact-context

Establish a connection to an already existing database using Mongoose

I've been exploring the inner workings of MongoDB lately. After setting up a local database, I created a collection with the following document: db.user.find().pretty() { "_id" : ObjectId("5a05844833a9b3552ce5cfec"), " ...

javascriptnode.jsmongodbexpress

Using jQuery's each method to implement dynamic fallback with JSON data

Is it possible to set a fallback function dynamically from an AJAX JSONP call? I've been trying, but it doesn't seem to work. I'm not sure if I'm doing it right. Here's what I have: var GetFacebookData = function (data) { ...

javascriptjqueryjsonajaxjsonp

Choose class based on the retrieved information

Good morning, I am working on dynamically setting the class of a td element based on data fetched from a database to reflect any changes or updates. One of the fields returned has four possible options, and I need to modify the CSS class of that field acc ...

jquerycssajax

Button failing to align properly in the center position

I was able to successfully create a responsive input box, but for some reason, the button is not aligned in the center. Below is the CSS code: .webdesigntuts-workshop button { background: linear-gradient(#333, #222); border: 1px solid #444; border- ...

htmlcss

The changes made to $scope in AngularJS are not being displayed in the view

The View Section <div class="col-sm-8" data-ng-init="init_enable_disable()"> <select class="form-control" style="margin-top: 5px;" data-ng-model="schedule.scheduleType" data-ng-change="enable_disableDiv(schedule.scheduleType);"> ...

javascriptangularjs

Using JQUERY to toggle classes conditionally

$('.showall').css("cursor","pointer").click(function() { $('.value-container').toggle(); $('.dim-header').toggleClass($('.dim-header').toggleClass() == 'dim-header' ? 'dim-header active' : & ...

javascriptjquery