https://github.com/afeiship/next-element-in-viewport

Judge element if is in viewport.
https://github.com/afeiship/next-element-in-viewport

dom element next viewport

Last synced: 4 days ago
JSON representation

Judge element if is in viewport.

• Host: GitHub
• URL: https://github.com/afeiship/next-element-in-viewport
• Owner: afeiship
• License: mit
• Created: 2018-09-19T03:19:50.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-11-22T09:45:58.000Z (about 4 years ago)
• Last Synced: 2025-01-06T08:08:31.750Z (about 1 month ago)
• Topics: dom, element, next, viewport
• Language: JavaScript
• Size: 17.6 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# next-element-in-viewport

> Detect element if is in viewport.

[![version][version-image]][version-url]

[![license][license-image]][license-url]

[![size][size-image]][size-url]

[![download][download-image]][download-url]

## installation

```bash

npm install -S @jswork/next-element-in-viewport

```

## usage

```js

import '@jswork/next-element-in-viewport';

// scroll into view when element not in the viewport

const el = document.querySelector('.to-scroll-element');

if (el && !nx.elementInViewport(el)) {

  el.scrollIntoView();

}

```

## resources

- https://stackoverflow.com/questions/123999/how-can-i-tell-if-a-dom-element-is-visible-in-the-current-viewport

## license

Code released under [the MIT license](https://github.com/afeiship/next-element-in-viewport/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@jswork/next-element-in-viewport

[version-url]: https://npmjs.org/package/@jswork/next-element-in-viewport

[license-image]: https://img.shields.io/npm/l/@jswork/next-element-in-viewport

[license-url]: https://github.com/afeiship/next-element-in-viewport/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@jswork/next-element-in-viewport

[size-url]: https://github.com/afeiship/next-element-in-viewport/blob/master/dist/next-element-in-viewport.min.js

[download-image]: https://img.shields.io/npm/dm/@jswork/next-element-in-viewport

[download-url]: https://www.npmjs.com/package/@jswork/next-element-in-viewport