From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:41:45 -0500
Subject: initial commit

---
 files/fi/web/api/intersectionobserver/index.html | 87 ++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 files/fi/web/api/intersectionobserver/index.html

(limited to 'files/fi/web/api/intersectionobserver')

diff --git a/files/fi/web/api/intersectionobserver/index.html b/files/fi/web/api/intersectionobserver/index.html
new file mode 100644
index 0000000000..e62bd8b216
--- /dev/null
+++ b/files/fi/web/api/intersectionobserver/index.html
@@ -0,0 +1,87 @@
+---
+title: IntersectionObserver
+slug: Web/API/IntersectionObserver
+translation_of: Web/API/IntersectionObserver
+---
+<div>{{APIRef("Intersection Observer API")}}</div>
+
+<p><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API:n </a> rajapinta <code><strong>IntersectionObserver</strong></code> tarjoaa asynkronisen keinon tarkkailla muutoksia kohde-elementin ja sen esi-isäelementin tai ylätason dokumentin {{Glossary('viewport')}}:n kanssa. Näihin korkeamman tason DOM -elementteihin viitataan nimellä "root".</p>
+
+<p>Kun <code>IntersectionObserver</code> 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ä <code>IntersectionObserver</code>:lla voidaan kuitenkin tarkkailla monen elementin näkyvyyttä tämän suhteen.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.IntersectionObserver()")}}</dt>
+ <dd>Luo uuden <code>IntersectionObserver</code> -instanssin, joka suorittaa annetun "callback" -function kun se havaitsee, että kohde-elementin näkyvyys on ylittänyt annetun kynnyksen.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.root")}} {{readonlyinline}}</dt>
+ <dd>Tietty elementin esi-isä -elementti, jonka suhteen kohteen {{domxref("element")}} näkyvyyttä tarkkaillaan. Jos tätä ei erityiesti määritellä, käytetään koko dokumentin juuren viewport:ia.</dd>
+ <dt>{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}</dt>
+ <dd>An offset rectangle applied to the root's {{Glossary('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 (<code>px</code>) or as a percentage (<code>%</code>). The default is "0px 0px 0px 0px".</dd>
+ <dt>{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}</dt>
+ <dd>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.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.disconnect()")}}</dt>
+ <dd>Stops the <code>IntersectionObserver</code> object from observing any target.</dd>
+ <dt>{{domxref("IntersectionObserver.observe()")}}</dt>
+ <dd>Tells the <code>IntersectionObserver</code> a target element to observe.</dd>
+ <dt>{{domxref("IntersectionObserver.takeRecords()")}}</dt>
+ <dd>Returns an array of {{domxref("IntersectionObserverEntry")}} objects for all observed targets.</dd>
+ <dt>{{domxref("IntersectionObserver.unobserve()")}}</dt>
+ <dd>Tells the <code>IntersectionObserver</code> to stop observing a particular target element.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">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 &lt;= 0) return;
+
+  loadItems(10);
+  console.log('Loaded new items');
+});
+// start observing
+intersectionObserver.observe(document.querySelector('.scrollerFooter'));</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("IntersectionObserver", "#intersection-observer-interface", "IntersectionObserver")}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref('MutationObserver')}}</li>
+ <li>{{domxref('PerformanceObserver')}}</li>
+ <li>{{domxref('ResizeObserver')}}</li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf