Значение пороговых значений наблюдателя пересечения не работает

Параметр «Пороги» в Intersection Observer не работает.

Чтобы дать больше контекста, элементы моего списка отображаются в области просмотра, и я хочу, чтобы каждый элемент наблюдался в наблюдателе пересечения области просмотра. Дело в том, что мне нужно наблюдать за ними с шагом 25%. И когда они попадают в область просмотра и / или выходят из области просмотра.

Согласно документации кажется, что предоставление массива порогов в качестве [0, 0.25, 0.50. 0.75, 1] должно выполнять свою работу, но на самом деле это не имеет никакого значения, чем присвоение ему значения 0 или 1. Я хочу наблюдать изменения каждый раз, когда пересечение элемента увеличивается или уменьшается на 25% в моем представлении прокрутки.

Вы можете проверить мой код на странице - https://codesandbox.io/s/rm46m1qy7o

Я использую Chrome v72 в Windows 10.


person Vineet 'DEVIN' Dev    schedule 17.02.2019    source источник
comment
Я считаю, что вариант конструктора - это порог. Примерно так: threshold: [0, 0.25, 0.5, 0.75, 1], (Довольно сбивает с толку то, что параметр конструктора отличается от свойства thresholds, доступного только для чтения)   -  person David784    schedule 17.02.2019
comment
@ David784 - Есть ли свойство с именем thresholds только для чтения? Я спрашивал о варианте, который нам нужно предоставить в конструкторе.   -  person Vineet 'DEVIN' Dev    schedule 17.02.2019
comment
Да, вот ссылка на параметры конструктора для IntersectionObserver на MDN. И вот один в раздел свойств. Обратите внимание на разницу. В любом случае, когда я изменил ваш код и ящик на threshold:, у меня все стало нормально работать.   -  person David784    schedule 17.02.2019
comment
Ой ну спасибо. Тег ReadOnly там раньше не замечал :). И на самом деле очень легко сделать эту ошибку, поскольку я обычно называю любую переменную массива множественным числом.   -  person Vineet 'DEVIN' Dev    schedule 17.02.2019


Ответы (2)


Для всех, кто приходит сюда из-за того, что их пороговое значение не работает, я упомяну еще одну причуду, которая меня на секунду смутила ...

Если это всего лишь одно значение, это должен быть примитивный тип данных. (например, {threshold: 0,1}) Если у вас есть только одно значение и вы поместите его в массив (например, {threshold: [0,1]}), это не сработает.

Но для нескольких значений нужен массив.

person RiverOceanSea    schedule 28.08.2019

Ответ довольно прост. thresholds - свойство только для чтения. В конструктор мы передаем threshold. Благодарим @ David784 за ответ на этот вопрос.

person Vineet 'DEVIN' Dev    schedule 21.02.2019