You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If no |options|.{{IntersectionObserverInit/threshold}} was provided to the
307
318
{{IntersectionObserver}} constructor, or the sequence is empty, the value
308
319
of this attribute will be [0].
320
+
: <dfn>delay</dfn>
321
+
::
322
+
A number indicating the minimum delay in milliseconds
323
+
between notifications from this observer for a given target.
324
+
: <dfn>trackVisibility</dfn>
325
+
::
326
+
A boolean indicating whether this {{IntersectionObserver}} will track
327
+
changes in a target's <a>visibility</a>.
309
328
</div>
310
329
311
330
An {{Element}} is defined as having a <dfn for="IntersectionObserver">content clip</dfn> if its computed style has <a>overflow properties</a> that cause its content to be clipped to the element's <a>padding edge</a>.
which is initialized by {{IntersectionObserver(callback, options)}}</a>.
555
-
They also have internal <dfn attribute for=IntersectionObserver>\[[rootMargin]]</dfn>
556
-
and <dfn attribute for=IntersectionObserver>\[[scrollMargin]]</dfn> slots
557
-
which are lists of four pixel lengths or percentages.
593
+
{{IntersectionObserver}} objects have the following internal slots:
594
+
* A <dfn attribute for=IntersectionObserver>\[[QueuedEntries]]</dfn> slot
595
+
initialized to an empty list.
596
+
* A <dfn attribute for=IntersectionObserver>\[[ObservationTargets]]</dfn> slot
597
+
initialized to an empty list.
598
+
* A <dfn attribute for=IntersectionObserver>\[[callback]]</dfn> slot
599
+
which is initialized by {{IntersectionObserver(callback, options)}}.
600
+
* A <dfn attribute for=IntersectionObserver>\[[rootMargin]]</dfn> slot
601
+
which is a list of four pixel lengths or percentages.
602
+
* A <dfn attribute for=IntersectionObserver>\[[scrollMargin]]</dfn> slot
603
+
which is a list of four pixel lengths or percentages.
604
+
* A <dfn attribute for=IntersectionObserver>\[[thresholds]]</dfn> slot
605
+
which is initialized by {{IntersectionObserver(callback, options)}}.
606
+
* A <dfn attribute for=IntersectionObserver>\[[delay]]</dfn> slot
607
+
which is initialized by {{IntersectionObserver(callback, options)}}.
608
+
* A <dfn attribute for=IntersectionObserver>\[[trackVisibility]]</dfn> slot
609
+
which is initialized by {{IntersectionObserver(callback, options)}}.
558
610
559
611
<h3 id='algorithms'>
560
612
Algorithms</h2>
@@ -584,7 +636,12 @@ and an {{IntersectionObserverInit}} dictionary |options|, run these steps:
584
636
8. If |thresholds| is empty, append <code>0</code> to |thresholds|.
585
637
9. The {{IntersectionObserver/thresholds}} attribute getter will return
586
638
this sorted |thresholds| list.
587
-
10. Return |this|.
639
+
10. Let |delay| be the value of |options|.{{IntersectionObserverInit/delay}}.
640
+
11. If |options|.{{IntersectionObserverInit/trackVisibility}} is true
641
+
and |delay| is less than <code>100</code>, set |delay| to <code>100</code>.
642
+
11. Set |this|'s internal {{[[delay]]}} slot to |options|.{{IntersectionObserverInit/delay}} to |delay|.
643
+
12. Set |this|'s internal {{[[trackVisibility]]}} slot to |options|.{{IntersectionObserverInit/trackVisibility}}.
644
+
13. Return |this|.
588
645
589
646
<h4 id='observe-target-element'>Observe a target Element</h4>
590
647
@@ -597,7 +654,8 @@ and an {{Element}} |target|, follow these steps:
597
654
an {{IntersectionObserverRegistration}} record
598
655
with an {{IntersectionObserverRegistration/observer}} property set to |observer|,
599
656
a {{IntersectionObserverRegistration/previousThresholdIndex}} property set to <code>-1</code>,
600
-
and a {{IntersectionObserverRegistration/previousIsIntersecting}} property set to <code>false</code>.
657
+
a {{IntersectionObserverRegistration/previousIsIntersecting}} property set to false,
658
+
and a {{IntersectionObserverRegistration/previousIsVisible}} property set to false.
601
659
3. Append |intersectionObserverRegistration|
602
660
to |target|'s internal {{[[RegisteredIntersectionObservers]]}} slot.
603
661
4. Add |target| to |observer|'s internal {{[[ObservationTargets]]}} slot.
@@ -691,6 +749,32 @@ run these steps:
691
749
6. Map |intersectionRect| to the coordinate space of the <a>viewport</a> of the {{document}} containing |target|.
692
750
7. Return |intersectionRect|.
693
751
752
+
<h4 id='calculate-visibility-algo'>
753
+
Compute whether a Target is unoccluded, untransformed, unfiltered, and opaque.</h4>
754
+
755
+
To compute the <dfn>visibility</dfn> of a <a for="IntersectionObserver">target</a>, run these steps:
756
+
1. If the |observer|'s {{IntersectionObserver/trackVisibility}} attribute is false, return false.
757
+
2. If the <a for="IntersectionObserver">target</a> has an <a>effective transformation matrix</a> other than a 2D translation or proportional 2D upscaling, return false.
758
+
3. If the <a for="IntersectionObserver">target</a>, or any element in its <a>containing block chain</a>, has an effective opacity other than 100%, return false.
759
+
4. If the <a for="IntersectionObserver">target</a>, or any element in its <a>containing block chain</a>, has any filters applied, return false.
760
+
5. If the implementation cannot guarantee that the <a for="IntersectionObserver">target</a> is completely unoccluded by other page content, return false.
761
+
762
+
Note: Implementations should use the <a>ink overflow rectangle</a> of page content when determining whether a <a for="IntersectionObserver">target</a> is occluded. For blur effects, which have theoretically infinite extent, the <a>ink overflow rectangle</a> is defined by the finite-area approximation described for the <a>blur</a> filter function.
763
+
764
+
6. Return true.
765
+
766
+
<h4 id='calculate-effective-transformation-matrix'>Calculate a <a for="IntersectionObserver">target</a>'s Effective Transformation Matrix</h4>
767
+
To compute the <dfn>effective transformation matrix</dfn> of a <a for="IntersectionObserver">target</a>, run these steps:
768
+
1. Let |matrix| be the <a>serialization</a> of the <a>identity transform function</a>.
769
+
2. Let |container| be the target.
770
+
3. While |container| is not the <a>intersection root</a>:
771
+
1. Set |t| to |container|'s <a>transformation matrix</a>.
772
+
2. Set |matrix| to |t| <a>post-multiplied</a> by |matrix|.
773
+
3. If |container| is the root element of a <a>nested browsing context</a>,
774
+
update |container| to be the <a>browsing context container</a> of |container|. Otherwise, update |container| to be the <a>containing block</a> of |container|.
775
+
4. Return |matrix|.
776
+
777
+
694
778
<h4 id='update-intersection-observations-algo'>
695
779
Run the Update Intersection Observations Steps</h4>
696
780
@@ -703,45 +787,54 @@ To <dfn export>run the update intersection observations steps</dfn> for a
703
787
2. For each |observer| in |observer list|:
704
788
1. Let |rootBounds| be |observer|'s <a>root intersection rectangle</a>.
705
789
2. For each |target| in |observer|'s internal {{[[ObservationTargets]]}} slot, processed in the same order that {{observe()}} was called on each |target|:
706
-
1. Let:
790
+
1. Let |registration| be the {{IntersectionObserverRegistration}} record
791
+
in |target|'s internal {{[[RegisteredIntersectionObservers]]}} slot
792
+
whose {{IntersectionObserverRegistration/observer}} property is equal to |observer|.
793
+
2. If <code>(|time| - |registration|.{{IntersectionObserverRegistration/lastUpdateTime}} < |observer|.{{IntersectionObserver/delay}})</code>, skip further processing for |target|.
794
+
3. Set |registration|.{{IntersectionObserverRegistration/lastUpdateTime}} to |time|.
795
+
4. Let:
707
796
- |thresholdIndex| be 0.
708
797
- |isIntersecting| be false.
709
798
- |targetRect| be a {{DOMRectReadOnly}} with |x|, |y|, |width|, and |height| set to 0.
710
799
- |intersectionRect| be a {{DOMRectReadOnly}} with |x|, |y|, |width|, and |height| set to 0.
711
-
2. If the <a>intersection root</a> is not the <a>implicit root</a>,
800
+
5. If the <a>intersection root</a> is not the <a>implicit root</a>,
712
801
and |target| is not in the same {{document}} as the <a>intersection root</a>,
713
802
skip to step 11.
714
-
3. If the <a>intersection root</a> is an {{Element}},
803
+
6. If the <a>intersection root</a> is an {{Element}},
715
804
and |target| is not a descendant of the <a>intersection root</a>
716
805
in the <a>containing block chain</a>, skip to step 11.
717
-
4. Set |targetRect| to the {{DOMRectReadOnly}} obtained by <a>getting the bounding box</a> for
806
+
7. Set |targetRect| to the {{DOMRectReadOnly}} obtained by <a>getting the bounding box</a> for
718
807
|target|.
719
-
4. Let |intersectionRect| be the result of running the <a>compute the intersection</a>
808
+
8. Let |intersectionRect| be the result of running the <a>compute the intersection</a>
720
809
algorithm on |target| and |observer|'s <a>intersection root</a>.
721
-
5. Let |targetArea| be |targetRect|'s area.
722
-
6. Let |intersectionArea| be |intersectionRect|'s area.
723
-
7. Let |isIntersecting| be true if |targetRect| and |rootBounds| intersect or are edge-adjacent,
810
+
9. Let |targetArea| be |targetRect|'s area.
811
+
10. Let |intersectionArea| be |intersectionRect|'s area.
812
+
11. Let |isIntersecting| be true if |targetRect| and |rootBounds| intersect or are edge-adjacent,
724
813
even if the intersection has zero area (because |rootBounds| or |targetRect| have
725
814
zero area).
726
-
9. If |targetArea| is non-zero, let |intersectionRatio| be |intersectionArea| divided by |targetArea|.<br>
815
+
12. If |targetArea| is non-zero, let |intersectionRatio| be |intersectionArea| divided by |targetArea|.<br>
727
816
Otherwise, let |intersectionRatio| be <code>1</code> if |isIntersecting| is true, or <code>0</code> if |isIntersecting| is false.
728
-
10. Set |thresholdIndex| to the index of the first entry in |observer|.{{thresholds}} whose value is greater than |intersectionRatio|, or the length of |observer|.{{thresholds}} if |intersectionRatio| is greater than or equal to the last entry in |observer|.{{thresholds}}.
729
-
11. Let |intersectionObserverRegistration| be the {{IntersectionObserverRegistration}} record
730
-
in |target|'s internal {{[[RegisteredIntersectionObservers]]}} slot
731
-
whose {{IntersectionObserverRegistration/observer}} property is equal to |observer|.
732
-
12. Let |previousThresholdIndex| be the |intersectionObserverRegistration|'s
817
+
13. Set |thresholdIndex| to the index of the first entry in |observer|.{{thresholds}} whose value is greater than |intersectionRatio|, or the length of |observer|.{{thresholds}} if |intersectionRatio| is greater than or equal to the last entry in |observer|.{{thresholds}}.
818
+
14. Let |isVisible| be the result of running the <a>visibility</a> algorithm on |target|.
819
+
15. Let |previousThresholdIndex| be the |registration|'s
0 commit comments