@malven/scroll-position
Tools for finding the relationship of an element to a scrollable viewport.
Last updated 2 months ago by cmal .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @malven/scroll-position 
SYNC missed versions from official npm registry.

Scroll Position

Tools for finding the relationship of an element to a scrollable viewport.


Install

npm i @malven/scroll-position

Dominant Element

Returns the element in a collection that is currently occupying the most visible spaces in the viewport.

import { dominantElement } from '@malven/scroll-position';
const els = document.querySelectorAll('.foo');
const dominantEl = dominantElement(els);

Use the minVisible option to specify a minimum number of pixels that must be visible for an element for it to be considered:

import { dominantElement } from '@malven/scroll-position';
const els = document.querySelectorAll('.foo');
const dominantEl = dominantElement(els, {
  minVisible: 100
});

Closest to Center

Returns the element in a collection whose center is currently the closest to the center of the viewport.

import { closestToCenter } from '@malven/scroll-position';
const els = document.querySelectorAll('.foo');
const closestEl = closestToCenter(els);

Use the minVisible option to specify a minimum number of pixels that must be visible for an element for it to be considered:

import { closestToCenter } from '@malven/scroll-position';
const els = document.querySelectorAll('.foo');
const closestEl = closestToCenter(els, {
  minVisible: 100
});

Use the maxDistance option to specify a maximum distance an element can be from the center for it to be considered (defaults to 2000):

import { closestToCenter } from '@malven/scroll-position';
const els = document.querySelectorAll('.foo');
const closestEl = closestToCenter(els, {
  maxDistance: 1000
});

Release

  • Bump version in package.json appropriately.
  • Create a new Github release identifying changes.
  • A Github Action will automatically run tests and publish the update.

Test

# Run tests once
npm test

# Build and run tests whenever files change
npm run dev

Current Tags

  • 1.0.5                                ...           latest (2 months ago)

4 Versions

  • 1.0.5                                ...           2 months ago
  • 1.0.4                                ...           2 months ago
  • 1.0.1                                ...           9 months ago
  • 1.0.0                                ...           9 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |