universal-intersection-observer v2.0.0-beta

intersectionObserver

Return An IntersectionObserver object that infers whether and how likely certain nodes are visible to users.

Supported

Install

$ npm install universal-intersectionObserver --save

or

$ npm install universal-api --save

Usage

import createIntersectionObserver from 'universal-intersectionObserver';

const intersectionObserver = createIntersectionObserver({
  component: null,
  options: {
    thresholds: [0]
  }
});

intersectionObserver.relativeTo('.box').observe('.circle', res => {
  console.log(res);
});

You can also import from the big package：

import { intersectionObserver } from 'universal-api';

const observer = intersectionObserver({
  options: {
    thresholds: [0]
  }
});

observer.relativeTo('.box').observe('.circle', res => {
  console.log(res);
});

Methods

createIntersectionObserver(component, options)

Arguments

Return

IntersectionObserver.relativeTo(string selector, Object margins)

Uses a selector to specify a node as one of the reference areas.

Arguments

Return

IntersectionObserver.relativeToViewport(Object margins)

Specifies the page display area as one of the reference areas.

Arguments

Return

IntersectionObserver.observe(string targetSelector, function callback)

Specifies the target node and starts listening on changes in the intersection status.

Arguments

callback res

intersectionRect、boundingClientRect

relativeRect

Return

IntersectionObserver.disconnect()

Stops listening, and the callback function will no longer be triggered.

注意

所有方法在微信小程序的自定义组件中使用的时候，都需要添加第二个参数来指定自定义组件实例：

// 在 Rax 小程序编译时链路参数为 this._internal
createIntersectionObserver({thresholds: [0]}, this);

// rax小程序基于kbone的运行时方案，不支持relativeTo，微信端使用时需要按下方示例方式传入实例
useEffect(() => {
  const node = document.querySelector('#circle');
  const intersectionObserver = createIntersectionObserver({}, node._internal);

  intersectionObserver.relativeToViewport().observe('#circle', res => {
    console.log(res);
    setAppear(res.intersectionRatio > 0);
  });
}, []);

/**
 * iframe: true
 */
import React from 'react';
export default () => (
  <iframe style={{
      boxShadow: '0 2px 15px rgba(0,0,0,0.1)',
      width: '375px',
      height: '700px'
    }} src='https://herbox.online/p/109000004/app_1aKtEd7SK?previewZoom=100&view=preview&defaultPage=pages/universal-intersection-observer/index&topSlider=false'></iframe>
);