https://github.com/imcuttle/dom-libs

The set of dom library
https://github.com/imcuttle/dom-libs

Last synced: 5 months ago
JSON representation

The set of dom library

• Host: GitHub
• URL: https://github.com/imcuttle/dom-libs
• Owner: imcuttle
• License: mit
• Created: 2020-08-31T15:01:37.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-01-07T14:34:31.000Z (over 4 years ago)
• Last Synced: 2025-10-24T20:52:58.037Z (8 months ago)
• Language: TypeScript
• Size: 291 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: License

Awesome Lists containing this project

README

          
# dom-libs

[![Build status](https://img.shields.io/travis/imcuttle/dom-libs/master.svg?style=flat-square)](https://travis-ci.org/imcuttle/dom-libs)

[![Test coverage](https://img.shields.io/codecov/c/github/imcuttle/dom-libs.svg?style=flat-square)](https://codecov.io/github/imcuttle/dom-libs?branch=master)

[![NPM version](https://img.shields.io/npm/v/dom-libs.svg?style=flat-square)](https://www.npmjs.com/package/dom-libs)

[![NPM Downloads](https://img.shields.io/npm/dm/dom-libs.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/dom-libs)

[![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://prettier.io/)

[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg?style=flat-square)](https://conventionalcommits.org)

> The set of dom library

## Installation

```bash

npm install dom-libs

# or use yarn

yarn add dom-libs

```

## Usage

```javascript

const domLibs = require('dom-libs')

```

## API

#### Table of Contents

- [findParent](#findparent)

  - [Parameters](#parameters)

- [scrollTo](#scrollto)

  - [Parameters](#parameters-1)

- [getViewTypeByViewport](#getviewtypebyviewport)

  - [Parameters](#parameters-2)

- [scrollIntoViewIfNeeded](#scrollintoviewifneeded)

  - [Parameters](#parameters-3)

- [getViewTypeBy](#getviewtypeby)

  - [Parameters](#parameters-4)

- [findScrollContainer](#findscrollcontainer)

  - [Parameters](#parameters-5)

- [getOffsetBy](#getoffsetby)

  - [Parameters](#parameters-6)

### findParent

#### Parameters

- `el` {Element} Start element

- `match` {(node, ctx) => boolean | string} selector or match function

- `opts` {Object} (optional, default `{}`)

  - `opts.parentType` {'parentElement' | 'parentNode'} (optional, default `'parentElement'`)

### scrollTo

#### Parameters

- `scroller` {any}

- `opts` {object} (optional, default `{}`)

  - `opts.top` {number}

  - `opts.left` {number}

  - `opts.behavior` {"auto" | "smooth"}

### getViewTypeByViewport

#### Parameters

- `el` {Element}

### scrollIntoViewIfNeeded

Like `Element.scrollIntoViewIfNeeded`

#### Parameters

- `el` {any}

- `opts` {object} (optional, default `{}`)

  - `opts.scroller` {Element}

  - `opts.behavior` {"auto" | "smooth"}

  - `opts.offsetTop` {number}

  - `opts.offsetLeft` {number}

  - `opts.offsetBottom` {number}

  - `opts.offsetRight` {number}

### getViewTypeBy

Returns the `el` position's relation in `byEl` like `{xType: 'contain' | 'intersection' | 'parallel', yType: 'contain' | 'intersection' | 'parallel', elOffset: object, byRect: object}`

#### Parameters

- `el` {Element}

- `byEl` {Element} (optional, default `findScrollContainer(el)`)

### findScrollContainer

Find scroll container which can emits `scroll` event

#### Parameters

- `el` {any} start element

- `opts` {object} (optional, default `{}`)

  - `opts.overflowStyleName` {string} (optional, default `'overflowY'`)

Returns **(null | [Element](https://developer.mozilla.org/docs/Web/API/Element))**

### getOffsetBy

#### Parameters

- `elem` {Element}

- `byElem` {Element}

Returns **{width: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), height: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), left: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), top: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)}**

## Contributing

- Fork it!

- Create your new branch:  

  `git checkout -b feature-new` or `git checkout -b fix-which-bug`

- Start your magic work now

- Make sure npm test passes

- Commit your changes:  

  `git commit -am 'feat: some description (close #123)'` or `git commit -am 'fix: some description (fix #123)'`

- Push to the branch: `git push`

- Submit a pull request :)

## Authors

This library is written and maintained by imcuttle, moyuyc95@gmail.com.

## License

MIT - [imcuttle](https://github.com/imcuttle) 🐟