IntersectionObserver.IntersectionObserver()
åºçº¿
广æ³å¯ç¨
èª 2019å¹´3æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
**IntersectionObserver()**æé å¨å建并è¿åä¸ä¸ªIntersectionObserver对象ã妿æå®rootMarginå伿£æ¥å
¶æ¯å¦ç¬¦åè¯æ³è§å®ï¼æ£æ¥éå¼ä»¥ç¡®ä¿å
¨é¨å¨ 0.0 å° 1.0 ä¹é´ï¼å¹¶ä¸éå¼åè¡¨ä¼æååºæåã妿éå¼å表为空ï¼åé»è®¤ä¸ºä¸ä¸ª [0.0] çæ°ç»ã
è¯æ³
var observer = new IntersectionObserver(callback[, options]);
åæ°
callback-
å½å ç´ å¯è§æ¯ä¾è¶ è¿æå®éå¼åï¼ä¼è°ç¨ä¸ä¸ªåè°å½æ°ï¼æ¤åè°å½æ°æ¥åä¸¤ä¸ªåæ°ï¼
entries-
ä¸ä¸ª
IntersectionObserverEntryå¯¹è±¡çæ°ç»ï¼æ¯ä¸ªè¢«è§¦åçéå¼ï¼é½æå¤æå°ä¸æå®é弿åå·®ã observer-
被è°ç¨ç
IntersectionObserverå®ä¾ã
optionså¯é-
ä¸ä¸ªå¯ä»¥ç¨æ¥é ç½® observer å®ä¾ç对象ã妿
optionsæªæå®ï¼observer å®ä¾é»è®¤ä½¿ç¨ææ¡£è§å£ä½ä¸º rootï¼å¹¶ä¸æ²¡æ marginï¼éå¼ä¸º 0%ï¼æå³çå³ä½¿ä¸åç´ çæ¹åé½ä¼è§¦ååè°å½æ°ï¼ãä½ å¯ä»¥æå®ä»¥ä¸é ç½®ï¼root-
çå¬å ç´ çç¥å å ç´
Element对象ï¼å ¶è¾¹ççå°è¢«è§ä½è§å£ãç®æ 卿 ¹çå¯è§åºåçä»»ä½ä¸å¯è§é¨åé½ä¼è¢«è§ä¸ºä¸å¯è§ã rootMargin-
ä¸ä¸ªå¨è®¡ç®äº¤å弿¶æ·»å è³æ ¹çè¾¹çç (bounding_box) ä¸çä¸ç»åç§»éï¼ç±»å为å符串 (string) ï¼å¯ä»¥ææçç¼©å°ææ©å¤§æ ¹çå¤å®èå´ä»è满足计ç®éè¦ãè¯æ³å¤§è´å CSS ä¸ç
margin屿§çå; å¯ä»¥åè intersection root å root margin æ¥æ·±å ¥äºè§£ margin çå·¥ä½åçåå ¶è¯æ³ãé»è®¤å¼æ¯"0px 0px 0px 0px"ã threshold-
è§å®äºä¸ä¸ªçå¬ç®æ ä¸è¾¹çç交ååºåçæ¯ä¾å¼ï¼å¯ä»¥æ¯ä¸ä¸ªå ·ä½çæ°å¼ææ¯ä¸ç» 0.0 å° 1.0 ä¹é´çæ°ç»ãè¥æå®å¼ä¸º 0.0ï¼åæå³ççå¬å ç´ å³ä½¿ä¸æ ¹æ 1 åç´ äº¤åï¼æ¤å ç´ ä¹ä¼è¢«è§ä¸ºå¯è§ãè¥æå®å¼ä¸º 1.0ï¼åæå³çæ´ä¸ªå ç´ é½å¨å¯è§èå´å æ¶æç®å¯è§ãå¯ä»¥åèé弿¥æ·±å ¥äºè§£é弿¯å¦ä½ä½¿ç¨çãéå¼çé»è®¤å¼ä¸º 0.0ã
è¿åå¼
ä¸ä¸ªå¯ä»¥ä½¿ç¨è§å®éå¼çå¬ç®æ å
ç´ å¯è§é¨åä¸root交åç¶åµçæ°çIntersectionObserver å®ä¾ãè°ç¨èªèº«çobserve() æ¹æ³å¼å§ä½¿ç¨è§å®çéå¼ç嬿å®ç®æ ã
å¼å¸¸
SyntaxError-
æå®ç
rootMarginä¸åå¨ã - RangeError
-
ä¸ä¸ªæå¤ä¸ªéå¼è¶ åºäº 0.0 å° 1.0 çèå´ã
è§è
| è§è |
|---|
| Intersection Observer > # dom-intersectionobserver-intersectionobserver > |