From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/api/intersectionobserver/index.html | 95 ++++++++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 files/ru/web/api/intersectionobserver/index.html (limited to 'files/ru/web/api/intersectionobserver') diff --git a/files/ru/web/api/intersectionobserver/index.html b/files/ru/web/api/intersectionobserver/index.html new file mode 100644 index 0000000000..707224cab5 --- /dev/null +++ b/files/ru/web/api/intersectionobserver/index.html @@ -0,0 +1,95 @@ +--- +title: IntersectionObserver +slug: Web/API/IntersectionObserver +tags: + - API + - Experimental + - Interface + - Intersection Observer + - Intersection Observer API + - Reference + - observers +translation_of: Web/API/IntersectionObserver +--- +
{{APIRef("Intersection Observer API")}}
+ +

Интерфейс IntersectionObserver в составе Intersection Observer API предоставляет возможность асинхронного наблюдения за изменением пересечения целевого элемента с вышестоящим элементом или с верхоуровневым {{Glossary('viewport')}} документа. Вышестоящий элемент или viewport считается корнем.

+ +

Когда IntersectionObserver создан, он настроен на отслеживание заданных соотношений видимости в корне. Конфигурация не может быть изменена после создания IntersectionObserver, поэтому такой объект-наблюдатель полезен только для наблюдения за определенными изменениями в степени видимости; однако вы можете следить за несколькими целевыми элементами с одним и тем же наблюдателем.

+ +

Constructor

+ +
+
{{domxref("IntersectionObserver.IntersectionObserver()")}}
+
Создаёт новый объект IntersectionObserver, который будет запускать специальную callback-функцию, когда обнаружит пересечение одного или нескольких пороговых значений видимостью целевого элемента.
+
+ +

Properties

+ +
+
{{domxref("IntersectionObserver.root")}} {{readonlyinline}}
+
Конкретный предок наблюдаемого целевого {{domxref("element")}}. Если в конструктор не было передано значения или оно null, будет использован viewport документа.
+
{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}
+
Смещение прямоугольника (пер. "An offset rectangle"), применяемое к {{Glossary('bounding box')}} корня при расчёте пересечений, эффективно сжимает или увеличивает корень для целей расчёта. Возвращаемое этим свойством значение может не совпадать со значением, указанным при вызове конструктора, поскольку оно может быть изменено в соответствии с внутренними требованиями. Каждое смещение может быть выражено в пикселях (px) или в процентах (%). Значение по умолчанию "0px 0px 0px 0px".
+
{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}
+
Список порогов, отсотированный по возрастанию, где каждый порог представляет собой отношение площади пересечения к ограничивающей области наблюдаемой цели. Уведомления для цели генерируются, когда любое из пороговых значений пересекается для этой цели. Если в конструктор не было передано значения, используется 0.
+
+ +

Methods

+ +
+
{{domxref("IntersectionObserver.disconnect()")}}
+
Отключает объект IntersectionObserver от наблюдения любой цели.
+
{{domxref("IntersectionObserver.observe()")}}
+
Сообщает объекту IntersectionObserver целевой элемент для наблюдения.
+
{{domxref("IntersectionObserver.takeRecords()")}}
+
Возвращает массив из объектов {{domxref("IntersectionObserverEntry")}} для всех наблюдаемых целей.
+
{{domxref("IntersectionObserver.unobserve()")}}
+
Сообщает объекту IntersectionObserver прекратить наблюдение за конкретным целевым элементом.
+
+ +

Examples

+ +
var intersectionObserver = new IntersectionObserver(function(entries) {
+  // Если intersectionRatio равен 0, цель вне зоны видимости
+  // и нам не нужно ничего делать
+  if (entries[0].intersectionRatio <= 0) return;
+
+  loadItems(10);
+  console.log('Loaded new items');
+});
+// начать наблюдение
+intersectionObserver.observe(document.querySelector('.scrollerFooter'));
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("IntersectionObserver", "#intersection-observer-interface", "IntersectionObserver")}}{{Spec2('IntersectionObserver')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.IntersectionObserver")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf