Блог

Главная - Вопросы по программированию - Почему IntersectionObserver не работает для среднего div?

Почему IntersectionObserver не работает для среднего div?

#javascript #dom

#javascript #dom

Вопрос:

У меня есть следующий код…

 <div id="wrapper">
    <div id="test1"
         class="scroll-item">Simple Test 1</div>
    <div id="test2"
         class="scroll-item">Simple Test 2</div>
    <div id="test3"
         class="scroll-item">Simple Test 3</div>
</div>
...
const onChange = function(changes) {
    changes.forEach(change => {
        change.intersectionRatio <= 0 ?
            change.target.classList.remove("selected"):
            change.target.classList.add("selected");
    });
}
const intersectionObservers = [];
const body = document.querySelector("#wrapper");
const scrollItems = body
    .querySelectorAll(".scroll-item");
scrollItems.forEach(item=>{
    const intersectionObserver = new IntersectionObserver(onChange, {
        root: body
    });
    intersectionObserver.observe(item);
    intersectionObservers.push(item);
});

Но когда я запускаю это, я не могу выбрать средний div. Я попытался добавить корневое поле…

 const intersectionObserver = new IntersectionObserver(onChange, {
    root: body,
    rootMargin: "-20px"
});

Это работает несколько, но имеет странное поведение. Иногда выбираются два элемента, и тест 2, похоже, все еще не выбран правильно. Также, если я удалю тест 3, test2 никогда не будет работать. Чего мне не хватает?

Пример, который я использую, доступен здесь

Комментарии:

1. Можете ли вы уточнить, чего вы пытаетесь достичь? Насколько я вижу, onChange обработчик добавляет или удаляет selected класс CSS из .scroll-items , но в CSS нет selected класса в ссылке github, которой вы поделились.

2. То, что делается с выбранным классом, не имеет значения в рамках вопроса, просто он добавляется. Не могли бы вы немного лучше объяснить, какую информацию вы ищете. Цель состоит в том, чтобы добавить выбранный класс к элементу, который находится в окне просмотра, а затем удалить, когда другой достигнет вершины

3. Если я правильно вас понял, вы хотите, чтобы один scroll-item оставался выбранным до тех пор, пока другой не достигнет вершины?

4. Правильно, но я также не хочу, чтобы он оставался включенным после выхода из области просмотра. Я не уверен, что они будут следовать один за другим организованно, как в демонстрации. Таким образом, он не может просто добавить выбранный, когда он попадает в верхнюю часть, ему также необходимо удалить класс, когда нижняя часть исчезает из поля зрения.

5. Также я могу сделать это с помощью ограничивающего прямоугольника, но у этого возникают проблемы, когда у меня есть заголовки или элемент находится в абсолютном положении. Итак, этот вопрос специфичен для IntersectionObserver

Метки: