Can someone help me to scroll to specific child in the list?

here is my sandbox scroll to specific item - CodeSandbox
I need to jump to a specific item on the list.

It seems to work for me. In what way does this not do what you want?

Lets the id is 5 so when I click on 'scroll to 5` button it should jump to the 5th child means, 5th child has to come on the front. right its hidden because we are on top of the list.

This is what I see after hitting “Scroll to 5”.

Is that not what you see?

did you scroll it manually ? beacuse i haven’t written any logic inside the handleScroll.

  const handleScroll = () => {
    console.log("scroll");
    
  };

So it will certainly not work on click

Are we looking at the same project?

  const handleScroll = () => {
    console.log("scroll");
    const list = document.querySelector("ul");
    let items = list.querySelectorAll("li");
    let item = items[id - 1];

    item.scrollIntoView({
      behavior: "smooth"
    });
  };

I don’t know how that is possible. I don’t have any such code. Could you post the link ?

I did paste that code as suggested by someone but it wasn’t working so I removed it.
also do you think the above code is correct. i mean we can’t manipulate the direct dom. at least we gotta use ref

I just followed the link you gave.

Yes, I didn’t notice this was React. Yeah, that is a bad idea. Did you google “react scroll to element”?

Yes, i did google but i couldnt find something i understand. I did understood that i need refs to do this but i am still struggling.

Try something and then share that.

okay, thanks and i do see the code when i follow the link privately.

Thanks again

It’s also working for me.

Hey, Could you look at the link again. I have made some changes. I have three button there. Show, scroll and hide. could you help me to combine show and scroll in just one button ?

Well, you have functions to do these things, right?

Are you asking to make them into one button and remove the others? Then combine those functions and call that from the new button.

Do you mean to add a new button that does both? Can you create a handler that calls those other two functions?

Maybe I’m not understanding…

As of now i have three button all of them does thier job.

What i want is have two button one to hide, one to show and scroll.

The problem is when i combine show and scroll into one function. Ref is set to null and it doesn’t scroll.

You may fork my example and try it yourself. I just want a button which shows the list at the same time scroll to whatever id it set to.

I don’t know, I was able to move the code from handleShow into handleScroll and it worked for me.

The problem is when i combine show and scroll into one function. Ref is set to null and it doesn’t scroll.

I did not see this.

One issue I did have is that you have to show first - you can’t scroll on something that doesn’t exist. The other issue is a race condition - showing my not be done before we try to scroll. One simple solution for this was to wrap the scrolling code in a setTimeout and give it a timeout of 0 - this makes JS flush out the event loop, ensuring that the showing code gets run first.

It’s too much too explain but the issue was solved. I really appreciate you taking your time to help.

Thanks for your efforts Kevin

1 Like