How to scroll to the desired element in React?

Question

I have a question - I have a list that is in a separate popup with a limited height. After this height, a side scroll appears. I need to scroll to a specific element automatically when that component is rendered. How to implement it? I just can't figure out how to scroll to a certain element.

Below is an example of my jsx code

<ul className={style.list}>
        {itemsForRender?.length ? (
          itemsForRender.map((item) => (
            <li className={style.item} key={item.id}>
              <button
                type="button"
                className={
                  activeItem === item.id
                    ? `${style.button} ${style.activeClass}`
                    : style.button
                }
                onClick={() => selectItem(item.id)}
              >
                {item.name}
              </button>
            </li>
          ))
        ) : (
          <p className={style.searchSubtitle}>
            Just text
          </p>
        )}
      </ul>

Ali Javadpour · Accepted Answer · 2022-07-05 10:53:34Z

2

you can use scrollIntoView() where you want scroll automatically

document.getElementById(element-id).scrollIntoView({behavior: 'smooth'})

you can use this in a useEffect() to run it when component is rendered

answered Jul 5, 2022 at 10:53

Ali Javadpour

334 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ahmad · Accepted Answer · 2022-07-05 11:00:05Z

I hope this would be helpful. thanks

const scrollRef = useRef([]);

useEffect(() => {
      // here you call the function scrollToSection and pass the id where you want to scroll
    }, [])

const scrollToSection = id => {
  if (scrollRef.current.length) {
    scrollRef.current[id].scrollIntoView();
  }
};

<ul className={style.list}>
  {itemsForRender?.length ? (
    itemsForRender.map((item) => (
      <li className={style.item} ref={ref => (scrollRef.current[item.id] = ref)} key={item.id}>
        <button
          type="button"
          className={
            activeItem === item.id
              ? `${style.button} ${style.activeClass}`
              : style.button
          }
          onClick={() => selectItem(item.id)}
        >
          {item.name}
        </button>
      </li>
    ))
  ) : (
    <p className={style.searchSubtitle}>
      Just text
    </p>
  )}
</ul>

Moein Moeinnia · Accepted Answer · 2022-07-05 10:45:18Z

0

Use this code :

const ScrollDemo = () => {
   const myRef = useRef(null)

   const executeScroll = () => myRef.current.scrollIntoView()    
   // run this function from an event handler or an effect to execute scroll 

   return (
      <> 
         <div ref={myRef}>Element to scroll to</div> 
         <button onClick={executeScroll}> Click to scroll </button> 
      </>
   )
}

answered Jul 5, 2022 at 10:45

Moein Moeinnia

2,4364 gold badges15 silver badges27 bronze badges

1 Comment

Moein Moeinnia Over a year ago

GoodLuck my friend

Asad Ashraf · Accepted Answer · 2022-07-05 10:46:31Z

0

I had used Element.scrollIntoView() Method in React with making a reference of element i want to scroll to, here is the example:

function TestComponent() {
  const testRef = useRef(null);
  const scrollToElement = () => testRef.current.scrollIntoView();
  // Once the scrollToElement function is run, the scroll will show the element
  return (
    <>
      <div ref={testRef}>Element you want to view</div>
      <button onClick={scrollToElement}>Trigger the scroll</button>
    </>
  );
}

answered Jul 5, 2022 at 10:46

Asad Ashraf

1,71511 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to scroll to the desired element in React?

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related