https://github.com/wojtekmaj/detect-element-overflow

A function that tells you whether a given element is overflowing its container or not. Useful for creating dropdowns and tooltips.
https://github.com/wojtekmaj/detect-element-overflow

collision collision-detection position

Last synced: 17 days ago
JSON representation

A function that tells you whether a given element is overflowing its container or not. Useful for creating dropdowns and tooltips.

• Host: GitHub
• URL: https://github.com/wojtekmaj/detect-element-overflow
• Owner: wojtekmaj
• License: mit
• Created: 2017-09-05T19:04:15.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2024-09-18T07:42:36.000Z (about 2 months ago)
• Last Synced: 2024-10-14T11:19:26.055Z (30 days ago)
• Topics: collision, collision-detection, position
• Language: TypeScript
• Homepage:
• Size: 3.21 MB
• Stars: 24
• Watchers: 3
• Forks: 10
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
[![npm](https://img.shields.io/npm/v/detect-element-overflow.svg)](https://www.npmjs.com/package/detect-element-overflow) ![downloads](https://img.shields.io/npm/dt/detect-element-overflow.svg) [![CI](https://github.com/wojtekmaj/detect-element-overflow/actions/workflows/ci.yml/badge.svg)](https://github.com/wojtekmaj/detect-element-overflow/actions)

# Detect-Element-Overflow

A function that tells you whether a given element is overflowing its container or not. Useful for creating dropdowns and tooltips.

## tl;dr

- Install by executing `npm install detect-element-overflow` or `yarn add detect-element-overflow`.

- Import by adding `import detectElementOverflow from 'detect-element-overflow'`.

- Do stuff with it!

  ```ts

  const collisions = detectElementOverflow(child, parent);

  ```

## User guide

Detect-Element-Overflow returns an object with getter functions described below.

| Attribute name | Description                                                                                                                                                         | Example values |

| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |

| collidedTop    | Whether or not the child element collided with the top parent's border.                                                                                             | `true`         |

| collidedBottom | Whether or not the child element collided with the bottom parent's border.                                                                                          | `true`         |

| collidedLeft   | Whether or not the child element collided with the left parent's border.                                                                                            | `true`         |

| collidedRight  | Whether or not the child element collided with the right parent's border.                                                                                           | `true`         |

| overflowTop    | How many pixels of the child have crossed the top parent's border. Negative values specify how many pixels are between the child and the top parent's border.       | `20`, `-15`    |

| overflowBottom | How many pixels of the child have crossed the bottom parent's border. Negative values specify how many pixels are between the child and the bottom parent's border. | `20`, `-15`    |

| overflowLeft   | How many pixels of the child have crossed the left parent's border. Negative values specify how many pixels are between the child and the left parent's border.     | `20`, `-15`    |

| overflowRight  | How many pixels of the child have crossed the right parent's border. Negative values specify how many pixels are between the child and the right parent's border.   | `20`, `-15`    |

## License

The MIT License.

## Author

  

    

      

    

    

      Wojciech Maj