intersection_observer 1.0.0

intersection_observer #

A Dart wrapper for the Intersection Observer API


import 'dart:html';
import "package:js/js.dart";
import 'package:intersection_observer/intersection_observer.dart' as io;

void main() {
  Element output = querySelector('#output');
  var blocks = querySelectorAll('.block');
  for (var b in blocks) {
  io.IntersectionObserverCallback callback = (List<io.IntersectionObserverEntry> entries,
      io.IntersectionObserver observer) {
    entries.forEach((io.IntersectionObserverEntry entry) {'intersecting', entry.isIntersecting.toString());

      // print('''
      // boundingClientRect: ${entry.boundingClientRect}
      // intersectionRatio: ${entry.intersectionRatio}
      // intersectionRect: ${entry.intersectionRect}
      // isIntersecting: ${entry.isIntersecting}
      // rootBounds: ${entry.rootBounds}
      // target: ${}
      // time: ${entry.time}

      // observer.root ${observer.root}
      // observer.rootMargin ${observer.rootMargin}
      // observer.thresholds ${observer.thresholds}
      // ''');
    var redInView = blocks.where((Element el) => el.getAttribute('intersecting') == 'true' && el.classes.contains('red')).length;
    var greenInView = blocks.where((Element el) => el.getAttribute('intersecting') == 'true' && el.classes.contains('green')).length;
    output.innerHtml = '${redInView} red blocks in view <br> ${greenInView} green blocks in view';
  io.IntersectionObserver observer = new io.IntersectionObserver(callback);
  querySelectorAll('.block').forEach((Element el) {

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  intersection_observer: ^1.0.0

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:intersection_observer/intersection_observer.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Analysis issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see

Maintenance issues and suggestions

Make sure dartdoc successfully runs on your package's source files. (-10 points)

Dependencies were not resolved.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.22.1 <2.0.0