使用多個滾動條將滾動反應到 ref

Question

我有一個小問題，我無法弄清楚。

我的頁面中有一個帶有滾動條的元素。 這意味着我得到了主頁滾動條和第二個滾動條。 我在那個元素中有一個按鈕，它觸發了一個新的 div，里面有一些內容。 但是那個 div 在元素的視圖之外，所以你需要滾動才能看到它。 這不是真正的用戶友好，所以我試圖添加一個 function，當您單擊該按鈕時，它會滾動到新的 div。

元素圖片： https://imgur.com/8wIOTqo按鈕是金色的

問題是它使用的是主頁滾動條而不是元素的滾動條。 有誰知道如何解決這一問題？ 這是我的代碼

// 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

滾動到元素的一種方法是為 div 分配一個 id 並使用 scrollInto

我在下面的代碼和框中完成了參考它顯示了如何滾動到特定元素，即使它是嵌套滾動條

代碼：

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