Как аргумент root используется для вычислений в наблюдателе пересечения?

Question

При создании экземпляра IntersectionObserver с использованием конфигурации можно указать аргумент root, например,

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

Этот root определяется как ,

Пересечение root для IntersectionObserver - это значение его атрибута root или же узел документа контекста просмотра верхнего уровня (называемый неявным root), если атрибут root имеет значение null.

Прямоугольник пересечения root для IntersectionObserver - это прямоугольник, который мы будем использовать для проверки по целям.

1. Если пересечение root равно неявное root, оно обрабатывается так, как если бы root было документом контекста просмотра верхнего уровня, в соответствии со следующим правилом для документа.

2. Если пересечение root документ, это размер области просмотра документа (обратите внимание, что этот шаг обработки может быть достигнут, только если документ полностью активен).

3. В противном случае, если пересечение root имеет клип переполнения, это область содержимого элемента.

4. В противном случае это результат выполнения алгоритма getBoundingClientRect() на пересечении root.

Предположим, у меня есть следующие разметка, чтобы суммировать эту разметку, я пытался достичь:

1. Есть большие коробки с классом .item.
2. Все элементы находятся в #root div.
3. Первые несколько блоков находятся непосредственно внутри #root.
4. Следующие блоки находятся в блоке под названием .item-container с overflow-y: auto;. Таким образом, содержимое имеет прокручиваемый .
5. Наблюдатель пересечения, прикрепленный к каждому элементу с аргументом #root as root. Когда элементы прокручиваются в поле зрения, к ним присоединяется класс bubble, так что они начинают анимацию после превышения порога 0,5.

Согласно SPE c, ожидаемое поведение,

• Все элементы непосредственно под #root, применены с .bubble даже до того, как стали видны, как и ожидалось.
• Но элементы под .items-container не применяются с классом .bubble при прокрутке вверх. Они прикрепляются по мере появления в поле зрения при прокрутке .items-container. Но root установлен на #root. Итак,
  1. Это не подразумевается root, поскольку root не является нулевым
  2. Это не документ
  3. #root не имеет клипа переполнения

Мои вопросы:

1. Правильно ли это поведение?
2. Каков вариант использования для указания root другого, что null?
3. Если мы укажем null для root, для каждого наблюдателя пересечения элементы будут отображаться, когда они входят в окно просмотра, и будут отображаться, когда они появятся внутри контейнеров с зажимом для перелива?

Спасибо за участие.

$(function () {
  var i = 0;
  $(".item").each(function () {
    ++i;
    $(this).text("#Idea " + i);
  });

  var io = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("bubble");
        }
        else{
          entry.target.classList.remove("bubble");
        }
      });
    },
    {
      root: document.getElementById("root"),
      threshold: 0.5
    }
  );
  
  $('.item').each(function(){
    io.observe(this);
  });
  
});

.item-container{
  height: 600px;
  overflow:auto;
}

@keyframes bounce{
  from{
    transform: scale(0.7, 1);    
  } 
  50%{
    transform: scale(1.1, 1);    
    
  }
  to{
    transform: scale(0.7, 1);    
  }
}

.bubble{
  animation-name: bounce;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-fillmode: forward;
}

.item{
  height: 300px;
  width: 100%;
  margin: 20px;
  background-color:green;
  text-align:center;
  color:white;
  font-size: 30px;
  font-family: verdana;
}

.item-container .item{
  background-color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item-container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>