diff --git a/CHANGELOG.md b/CHANGELOG.md index f3ab9b2..9e9bbd4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,16 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## Unpublished + +### Fixed + +- Fixed the position data when a parent element was scrolled + +### Added + +- New `scrollableParents` field is now returned with `PositionData` + ## [1.0.1] - 2023-11-14 [Compare to previous release][comp:1.0.1] diff --git a/src/Types/PositionData.ts b/src/Types/PositionData.ts index b55881a..dbd752c 100644 --- a/src/Types/PositionData.ts +++ b/src/Types/PositionData.ts @@ -1,4 +1,5 @@ export type PositionData = { top: string; left: string; + scrollableParents: HTMLElement[]; }; diff --git a/src/index.ts b/src/index.ts index e0f381e..29f50ca 100644 --- a/src/index.ts +++ b/src/index.ts @@ -18,7 +18,7 @@ import { PositionData } from './Types/PositionData'; * @returns object with a top and left value in the form `{number}px` */ function position(options: IOptions): PositionData { - const { _bodyRect, _anchorRect, _targetRect } = initialisePrivateFields(); + const { _bodyRect, _anchorRect, _targetRect, scrollableParents } = initialisePrivateFields(); const myPos = Helpers.parse( options.my, @@ -44,6 +44,7 @@ function position(options: IOptions): PositionData { return { left: calculateLeft(myPos, atPos).value.toString() + 'px', top: calculateTop(myPos, atPos).value.toString() + 'px', + scrollableParents, // @ts-ignore ...(options.debug === true ? { _bodyRect, _anchorRect, _targetRect } @@ -56,6 +57,7 @@ function position(options: IOptions): PositionData { return { top: pos.top.toString() + 'px', left: pos.left.toString() + 'px', + scrollableParents, // @ts-ignore ...(options.debug === true ? { _bodyRect, _anchorRect, _targetRect } @@ -84,7 +86,8 @@ function position(options: IOptions): PositionData { const originalDisplay = options.target.style.display; options.target.style.display = 'block'; - const _targetRect = options.target.getBoundingClientRect(); + const _targetRect = options.target.getBoundingClientRect(), + scrollableParents : HTMLElement[] = []; options.target.style.display = originalDisplay; @@ -93,8 +96,9 @@ function position(options: IOptions): PositionData { let parent = options.anchor.parentElement; while (parent !== null && parent.tagName !== 'HTML') { - _anchorRect.y += parent.scrollTop; - _anchorRect.x += parent.scrollLeft; + // Check if scrollable + if (parent.scrollHeight > parent.clientHeight) + scrollableParents.push(parent) parent = parent.parentElement; } @@ -111,6 +115,7 @@ function position(options: IOptions): PositionData { _bodyRect, _anchorRect, _targetRect, + scrollableParents }; }