Intersection observer thresholds value not working

Question

Thresholds option in Intersection Observer doesn't seem to work.

To give more context, my list items are rendered in viewport and I want each item to observe on viewport's Intersection observer. The thing is, I need to observe them in steps of 25%. Both when they get in viewport and/or go out of viewport.

As per documentation it seems that providing thresholds array as [0, 0.25, 0.50. 0.75, 1] should do the work, but actually it doesn't make any difference than giving it a value of 0 or 1. I want to observe changes everytime an element's intersection increases or decreases by 25% in my scroll view.

You can check my code on - https://codesandbox.io/s/rm46m1qy7o

I am using chrome v72 on Windows 10.

Answer 1

For anyone else coming here for their threshold value not working, I'll mention another quirk that confused me for a second ....

If it's just one value, it should be a primitive data type. (ie {threshold: 0.1}) If you have just one value and put it in an array (ie {threshold: [0.1]}), it won't work.

But multiple values need an array.