I’m attempting to carry out a solitary scrollable checklist in a React application where clicking navigating web links must efficiently scroll to the particular area within the checklist. Nevertheless, I’m encountering concerns with the scrolling habits. When I click a web link, the target product scrolls to the first container, however the products over it are not concealed as anticipated.
Right here’s my present execution:
import React, {useState} from 'respond';.
const ListNavigationPage = () => > {
const [activeLinkId, setActiveLinkId] = useState( void);.
const handleLinkClick = (id) => > {
setActiveLinkId( id);.
const component = document.getElementById( id);.
if (component) {
const container = document.getElementById(' listContainer');.
if (container) {
container.scrollTo( {
top: element.offsetTop,.
habits: 'smooth'.
} );.
}
}
};.
const listItems = [
{ id: 'item1', title: 'Item 1' },
{ id: 'item2', title: 'Item 2' },
{ id: 'item3', title: 'Item 3' },
// Add more items as needed
];.
return (.
<< div id=" listContainer" className=" list-container">
> {listItems.map(( product) => > (.
<< div.
trick= {item.id}
id= {item.id}
className= {'list-item $ {activeLinkId === item.id? 'energetic':"} '}
>>.
<< a.
href= {'#$ {item.id} '}
onClick= {(e) => > {
e.preventDefault();.
handleLinkClick( item.id);.
}}
>>.
{item.title}
<.
<.
))}
<.
);.
};.
export default ListNavigationPage;.
I have actually made certain that the target product scrolls to the top of the container, however I'm missing out on the habits where the products over the clicked product needs to be concealed as they scroll hidden.
What am I missing out on in my execution? Exactly how can I attain the preferred scrolling habits where the clicked product goes to the first, as well as the products over it are concealed as they scroll hidden?
Right here you can examine it, as it DOES NOT job: https://datamapper.vercel.app/navigateInList
