3

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.

Arjun
  • 1,261
  • 1
  • 11
  • 26
Vineet 'DEVIN' Dev
  • 1,183
  • 1
  • 10
  • 35
  • 1
    I believe the constructor option is [threshold](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#Parameters). 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 Feb 17 '19 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 Feb 17 '19 at 19:06
  • 1
    Yeah, here's a link to the [constructor parameters](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#Parameters) for IntersectionObserver on MDN. And here's one to the [properties section](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver#Properties). Notice the difference. Anyway, when I changed your codesandbox to `threshold:` it started working fine for me. – David784 Feb 17 '19 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 Feb 17 '19 at 19:29

2 Answers2

3

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.

Maiya
  • 932
  • 2
  • 10
  • 26
0

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

Vineet 'DEVIN' Dev
  • 1,183
  • 1
  • 10
  • 35