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 -

I am using chrome v72 on Windows 10.

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.

• javascript
• intersection-observer

Share Improve this question Follow edited Apr 3, 2021 at 2:06 Arjun 1,39511 gold badge1212 silver badges2828 bronze badges asked Feb 17, 2019 at 18:48 Vineet 'DEVIN' DevVineet 'DEVIN' Dev 1,22311 gold badge1111 silver badges3737 bronze badges 4

• 1 I believe the constructor option is threshold. Like this: threshold: [0, 0.25, 0.5, 0.75, 1], (It's pretty confusing that the constructor option is different from the read-only thresholds property) – David784 Commented Feb 17, 2019 at 19:00
• @David784 - Is there a readonly property named thresholds too? I was asking of the option we need to provide in constructor. – Vineet 'DEVIN' Dev Commented Feb 17, 2019 at 19:06
• 1 Yeah, here's a link to the constructor parameters for IntersectionObserver on MDN. And here's one to the properties section. Notice the difference. Anyway, when I changed your codesandbox to threshold: it started working fine for me. – David784 Commented Feb 17, 2019 at 19:14
• Oh thanks. I didn't notice the ReadOnly tag there before :). And actually its very easy to make that mistake as generally I name any array variable as plural. – Vineet 'DEVIN' Dev Commented Feb 17, 2019 at 19:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

For anyone else ing 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.

Answer is rather simple. thresholds is a Read-Only property. What we pass in constructor is threshold. Credits to @David784 for answering this.