DEPRECATED

Use the @anypoint-web-components/awc module instead.

This mixin is a port of iron-overlay-behavior that works with LitElement.

ArcScrollTargetMixin allows an element to respond to scroll events from a designated scroll target.

Elements that consume this mixin can override the _scrollHandler method to add logic on the scroll event.

Installation

npm i @advanced-rest-client/arc-scroll-target-mixin

Usage

import { LitElement } from 'lit-element';
import { ArcScrollTargetMixin } from '@advanced-rest-client/arc-scroll-target-mixin/arc-scroll-target-mixin.js';

class ArcScrollTargetImpl extends ArcScrollTargetMixin(LitElement) {
  static get properties() {
    const top = super.properties || {};
    const props = {
      myProp: { type: String }
    }
    return Object.assign({}, top, props);
  }

  _scrollHandler(e) {
    ...
  }
}

Note, You need to include properties from the mixin manually as simple class extension overrides properties.

Testing

npm run test

Testing with Sauce Labs

npm run test:sl

Demo

npm start