使用多个滚动条将滚动反应到 ref

Question

I have a small problem that I can't figure out.

I have an element inside my page with a scrollbar. This means I got the main page scrollbar and a second scrollbar. I have a button inside that element that triggers a new div with some content inside of it. But that div is outside the view of the element so you need to scroll to see it. This is not really user friendly so I am trying to add a function that when you click on that button it scrolls to the new div.

Picture of element: https://imgur.com/8wIOTqo button is the gold coloured one

The problem is that it is using the main page scrollbar and not the scrollbar of the element. Does anyone know how to fix this? Here is my code

// Function to open the element and scroll to the ref 
function enableOtherAddressActive() {
    secondDeliveryAddressRef.current.scrollIntoView();
    setOtherAddress(true);
  }

<div className="deliveryaddress__different">
   {otherAddress ? (
            <div className="deliveryaddress__different-btn btn btn--primary" onClick={disableOtherAddressActive}>Afwijkend bezorgadres verwijderen</div>
         ) : (
            <div className="deliveryaddress__different-btn btn btn--primary" onClick={enableOtherAddressActive}>Afwijkend bezorgadres toevoegen</div>
              )}
            </div>
            <div className="deliveryaddress__second" ref={secondDeliveryAddressRef}>
              {otherAddress ? (
                <div className="deliveryaddress__inner">
                  <h3 className="deliveryaddress__title">
                    Afwijkend bezorgadres toevoegen
                  </h3>
                </div>
              ) : undefined}
            </div>
          </div>

Answer 1

One of the way to scroll to the element is assigning a id to the div and using scrollInto that

I have done in the codesandbox below refer it shows how to scroll into a particular element even if it is nested scrollbar

Code:

  const handleScrollTo = () => {
    setTimeout(() => {
      document.getElementById(`element`) &&
        document.getElementById(`element`).scrollIntoView({
          behavior: "smooth",
          block: "center"
        });
    }, 1000);
  };