Почему scrollIntoView выполняется сразу на двух элементах?

Question

[tron21]

Всем доброго дня! Есть такая ситуация. На странице есть два компонента со скроллами ( высота больше разрешенной либо из-за высоты экрана ), но разными z-index. Один частично перекрывает другой. У того что на первом плане есть код по скроллу к элементу . Ref указан у определенного элемента в длинном списке.

const myRef = useRef<HTMLLIElement | null>(null);

  const executeScroll = () => {
    if (myRef) {
      myRef?.current?.scrollIntoView({ behavior: "smooth" });
    }
  };

  useEffect(() => {
    executeScroll();
// сначала элементов нет. После их загрузки и получения в компоненте мы повторно вызываем useEffect
  }, [itemsForRender]);

// если выполнено определенное условие , то будет ref. Только один элемент подходит под условие всегда 
<li
              ref={something1 ===something2 ? myRef : undefined}

/>

Проблема в том что когда происходит скролл в этом компоненте, то происходит скролл и у компонента , который сзади , хотя у него этого нет в функционале. Кто-нибудь сталкивался с таким поведением scrollIntoView или кто-то может подсказать более лучший способ для выполнения скролла к элементу?

Comments

[Александр]

Похоже, проблема, с которой вы сталкиваетесь, заключается в том, что когда код выполняет scrollIntoViewметод для нужного liэлемента, он также вызывает прокрутку родительского контейнера или предыдущего компонента.

Это может быть вызвано тем, что родительский контейнер или предыдущий компонент имеют свойство overflow, установленное для прокрутки, что приведет к прокрутке всего родительского контейнера при прокрутке дочернего элемента в поле зрения.

Одним из способов исправить это было бы добавить overflow: hidden или overflow: auto в CSS родительского контейнера, чтобы предотвратить его прокрутку при прокрутке дочернего элемента в поле зрения. Другой способ - использовать библиотеку, такую как react-scroll или react-scrollbar, чтобы иметь больший контроль над поведением прокрутки. Вы также можете проверить executeScroll, не запускается ли функция несколько раз и не вызывает ли она нежелательную прокрутку.

[tron21]

Александр Котов, спасибо за совет! Проблема в том что я не могу поставить родителю свойство overflow. Дочерний компонент отображается за счет position поверх остальных окон. Если использовать overflow , то срезается его высота. Но кажется я лучше понял в какую сторону смотреть. Библиотеки тоже изучу. Спасибо!

Answer 1

[Григорий]

Наткнулся на этот вопрос
Был похожий - scrollIntoView вызывал скролл родительского элемента, в котором было несколько виджетов тоже со скролами
Если нужно чтобы скролл отрабатывал только на дочернем элементе не вызывая скролла родительского то лучше задавать scrollTop и не использовать scrollIntoView
Может кому пригодится)