From 9cfc3333db217162242e314a07873425200e2a97 Mon Sep 17 00:00:00 2001 From: Flcwl Date: Thu, 28 Apr 2022 11:08:53 +0800 Subject: [PATCH 1/2] fix: to get exact height to avoid scrolling deviation --- src/hooks/useHeights.tsx | 8 +++++--- src/utils/outerHeight.ts | 14 ++++++++++++++ 2 files changed, 19 insertions(+), 3 deletions(-) create mode 100644 src/utils/outerHeight.ts diff --git a/src/hooks/useHeights.tsx b/src/hooks/useHeights.tsx index 9a6bb832..d1c6a5fa 100644 --- a/src/hooks/useHeights.tsx +++ b/src/hooks/useHeights.tsx @@ -4,6 +4,7 @@ import findDOMNode from 'rc-util/lib/Dom/findDOMNode'; import raf from 'rc-util/lib/raf'; import type { GetKey } from '../interface'; import CacheMap from '../utils/CacheMap'; +import { getOuterHeight } from '../utils/outerHeight'; export default function useHeights( getKey: GetKey, @@ -26,9 +27,10 @@ export default function useHeights( instanceRef.current.forEach((element, key) => { if (element && element.offsetParent) { const htmlElement = findDOMNode(element); - const { offsetHeight } = htmlElement; - if (heightsRef.current.get(key) !== offsetHeight) { - heightsRef.current.set(key, htmlElement.offsetHeight); + const outerHeight = getOuterHeight(htmlElement) + + if (heightsRef.current.get(key) !== outerHeight) { + heightsRef.current.set(key, outerHeight); } } }); diff --git a/src/utils/outerHeight.ts b/src/utils/outerHeight.ts new file mode 100644 index 00000000..3fce1a38 --- /dev/null +++ b/src/utils/outerHeight.ts @@ -0,0 +1,14 @@ +const isFF = typeof navigator === 'object' && /Firefox/i.test(navigator.userAgent); + +/** + * To get exact height to avoid scrolling deviation + */ +export const getOuterHeight = (el: HTMLElement) => { + let height = el.offsetHeight; + const computedStyle = window.getComputedStyle(el); + height += parseInt(computedStyle.marginTop, 10); + height += parseInt(computedStyle.marginBottom, 10); + height += parseInt(computedStyle.borderTopWidth, 10); + height += parseInt(computedStyle.borderBottomWidth, 10); + return height; +} From c089fc5ebcdccdc66992e3e41bc63e4b9bf7f9a5 Mon Sep 17 00:00:00 2001 From: Flcwl Date: Thu, 28 Apr 2022 11:15:27 +0800 Subject: [PATCH 2/2] chore: only calc height with marign --- src/utils/outerHeight.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/utils/outerHeight.ts b/src/utils/outerHeight.ts index 3fce1a38..cb80ed3d 100644 --- a/src/utils/outerHeight.ts +++ b/src/utils/outerHeight.ts @@ -1,5 +1,3 @@ -const isFF = typeof navigator === 'object' && /Firefox/i.test(navigator.userAgent); - /** * To get exact height to avoid scrolling deviation */ @@ -8,7 +6,5 @@ export const getOuterHeight = (el: HTMLElement) => { const computedStyle = window.getComputedStyle(el); height += parseInt(computedStyle.marginTop, 10); height += parseInt(computedStyle.marginBottom, 10); - height += parseInt(computedStyle.borderTopWidth, 10); - height += parseInt(computedStyle.borderBottomWidth, 10); return height; }