IntersectionObserver

Tämä käännös on epätäydellinen. Please help translate this article from English

Intersection Observer API:n  rajapinta IntersectionObserver tarjoaa asynkronisen keinon tarkkailla muutoksia kohde-elementin ja sen esi-isäelementin tai ylätason dokumentin viewport:n kanssa. Näihin korkeamman tason DOM -elementteihin viitataan nimellä "root".

Kun IntersectionObserver luodaan, se konfiguroidaan tarkkailemaan DOM-elementtien näkyvyyttä suhteessa root:tiin. Tätä konfiguraatiota ei voida muuttaa sen jälkeen, kun se on initialisoitu, eli käytännössä yhdellä instanssilla tarkkaillaan elementtien näkyvyyttä yhden root -tason elementin suhteen. Yhdellä IntersectionObserver:lla voidaan kuitenkin tarkkailla monen elementin näkyvyyttä tämän suhteen.

Constructor

IntersectionObserver.IntersectionObserver()
Luo uuden IntersectionObserver -instanssin, joka suorittaa annetun "callback" -function kun se havaitsee, että kohde-elementin näkyvyys on ylittänyt annetun kynnyksen.

Properties

IntersectionObserver.root Read only
Tietty elementin esi-isä -elementti, jonka suhteen kohteen element näkyvyyttä tarkkaillaan. Jos tätä ei erityiesti määritellä, käytetään koko dokumentin juuren viewport:ia.
IntersectionObserver.rootMargin Read only
An offset rectangle applied to the root's bounding box when calculating intersections, effectively shrinking or growing the root for calculation purposes. The value returned by this property may not be the same as the one specified when calling the constructor as it may be changed to match internal requirements. Each offset can be expressed in pixels (px) or as a percentage (%). The default is "0px 0px 0px 0px".
IntersectionObserver.thresholds Read only
A list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target. Notifications for a target are generated when any of the thresholds are crossed for that target. If no value was passed to the constructor, 0 is used.

Methods

IntersectionObserver.disconnect()
Stops the IntersectionObserver object from observing any target.
IntersectionObserver.observe()
Tells the IntersectionObserver a target element to observe.
IntersectionObserver.takeRecords()
Returns an array of IntersectionObserverEntry objects for all observed targets.
IntersectionObserver.unobserve()
Tells the IntersectionObserver to stop observing a particular target element.

Examples

var intersectionObserver = new IntersectionObserver(function(entries) {
  // If intersectionRatio is 0, the target is out of view
  // and we do not need to do anything.
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log('Loaded new items');
});
// start observing
intersectionObserver.observe(document.querySelector('.scrollerFooter'));

Specifications

Specification Status Comment
Intersection Observer
The definition of 'IntersectionObserver' in that specification.
Working Draft

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
IntersectionObserver
Experimental
Chrome Full support 51Edge Full support 15Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 38Safari Full support 12.1WebView Android Full support 51Chrome Android Full support 51Firefox Android ? Opera Android Full support 41Safari iOS Full support 12.2Samsung Internet Android Full support 5.0
IntersectionObserver() constructor
Experimental
Chrome Full support 51Edge Full support 15Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 38Safari Full support 12.1WebView Android Full support 51Chrome Android Full support 51Firefox Android ? Opera Android ? Safari iOS Full support 12.2Samsung Internet Android Full support 5.0
disconnect
Experimental
Chrome Full support 51Edge Full support 15
Notes
Full support 15
Notes
Notes Available since Windows Insider Preview Build 14986
Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support YesSafari ? WebView Android Full support 51Chrome Android Full support 51Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
observe
Experimental
Chrome Full support 51Edge Full support 15Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support YesSafari Full support 12.1WebView Android Full support 51Chrome Android Full support 51Firefox Android ? Opera Android ? Safari iOS Full support 12.2Samsung Internet Android Full support 5.0
root
Experimental
Chrome Full support 51Edge Full support 15Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support YesSafari Full support 12.1WebView Android Full support 51Chrome Android Full support 51Firefox Android ? Opera Android ? Safari iOS Full support 12.2Samsung Internet Android Full support 5.0
rootMargin
Experimental
Chrome Full support 51Edge Full support 15Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support YesSafari Full support 12.1
Notes
Full support 12.1
Notes
Notes rootMargin does not work with <iframe>s.
WebView Android Full support 51Chrome Android Full support 51Firefox Android ? Opera Android ? Safari iOS Full support 12.2
Notes
Full support 12.2
Notes
Notes rootMargin does not work with <iframe>s.
Samsung Internet Android Full support 5.0
takeRecords
Experimental
Chrome Full support 51Edge Full support 15
Notes
Full support 15
Notes
Notes Available since Windows Insider Preview Build 14986
Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support YesSafari ? WebView Android Full support 51Chrome Android Full support 51Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
thresholds
Experimental
Chrome Full support 51Edge Full support 15Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support YesSafari Full support 12.1WebView Android Full support 51Chrome Android Full support 51Firefox Android ? Opera Android ? Safari iOS Full support 12.2Samsung Internet Android Full support 5.0
unobserve
Experimental
Chrome Full support 51Edge Full support 15
Notes
Full support 15
Notes
Notes Available since Windows Insider Preview Build 14986
Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support YesSafari Full support 12.1WebView Android Full support 51Chrome Android Full support 51Firefox Android ? Opera Android ? Safari iOS Full support 12.2Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also