From 69ccc65cc78be643b1205b0409e8e131b88488cc Mon Sep 17 00:00:00 2001 From: Glenn <33450392+glenn2223@users.noreply.github.com> Date: Tue, 30 Jul 2024 11:49:28 +0100 Subject: [PATCH 1/2] Scrolling Changes - Applied a fix to the body scrolling _`getBoundingClientRect` is relative to the screen so it should never need to be adjusted (unless the user scrolls)_ - Store the scrollable parent elements To help respond to the user's scrolling --- src/Types/PositionData.ts | 1 + src/index.ts | 13 +++++++++---- 2 files changed, 10 insertions(+), 4 deletions(-) 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 }; } From a36a08fd939708fb683552022b7f7fd23d435fc9 Mon Sep 17 00:00:00 2001 From: Glenn <33450392+glenn2223@users.noreply.github.com> Date: Tue, 30 Jul 2024 11:55:16 +0100 Subject: [PATCH 2/2] Updated change log --- CHANGELOG.md | 10 ++++++++++ 1 file changed, 10 insertions(+) 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]