dom-libs

The set of dom library

Usage no npm install needed!

<script type="module">
  import domLibs from 'https://cdn.skypack.dev/dom-libs';
</script>

README

dom-libs

Build status Test coverage NPM version NPM Downloads Prettier Conventional Commits

The set of dom library

Installation

npm install dom-libs
# or use yarn
yarn add dom-libs

Usage

const domLibs = require('dom-libs')

API

Table of Contents

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)

getOffsetBy

Parameters

  • elem {Element}
  • byElem {Element}

Returns {width: number, height: number, left: number, top: 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 🐟