fix: 修复 Image 组件开启 lazy 后在 fixed 定位容器下检查交叉异常的问题 (#820)

* fix: 修复 `Image` 组件开启 `lazy` 后在 fixed 定位容器下检查交叉异常的问题 --------- Co-authored-by: 颜宇浩 <[email protected]>
sheinsight · Nov 27, 2024 · 3206bd7 · 3206bd7
1 parent 702b1ff
commit 3206bd7
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sheinx",
   "private": true,
-  "version": "3.5.2-beta.9",
+  "version": "3.5.2-beta.10",
   "description": "A react library developed with sheinx",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/packages/hooks/src/utils/dom/element.tsx b/packages/hooks/src/utils/dom/element.tsx
@@ -113,9 +113,13 @@ export function getClosestScrollContainer(element: HTMLElement | null): HTMLElem
     const style = window.getComputedStyle(el);
     const overflowX = style.overflowX;
     const overflowY = style.overflowY;
-    return (overflowX === 'auto' || overflowX === 'scroll' ||
-            overflowY === 'auto' || overflowY === 'scroll') &&
-           (el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth);
+    return (
+      (overflowX === 'auto' ||
+        overflowX === 'scroll' ||
+        overflowY === 'auto' ||
+        overflowY === 'scroll') &&
+      (el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth)
+    );
   };
 
   // 如果元素本身是可滚动的，直接返回
@@ -136,6 +140,29 @@ export function getClosestScrollContainer(element: HTMLElement | null): HTMLElem
   return (document.scrollingElement || document.documentElement) as HTMLElement;
 }
 
+export function getClosestFixedContainer(element: Element | HTMLElement | null) {
+  if (!element) {
+    return null;
+  }
+
+  const isFixable = (el: HTMLElement) => {
+    const style = window.getComputedStyle(el);
+    return style.position === 'fixed';
+  };
+
+  // 遍历父元素
+  let parent = element.parentElement;
+
+  while (parent) {
+    if (isFixable(parent)) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+
+  return null;
+}
+
 export function cssSupport(attr: keyof CSSStyleDeclaration, value: string) {
   if (isBrowser()) {
     const element = document.createElement('div');

diff --git a/packages/hooks/src/utils/lazyload.ts b/packages/hooks/src/utils/lazyload.ts
@@ -1,4 +1,5 @@
 import { generateUUID, docSize } from '../utils';
+import { getClosestFixedContainer } from './dom/element';
 
 type Timer = NodeJS.Timeout | null;
 
@@ -70,7 +71,8 @@ export function removeStack(id?: string | null, removeListener?: boolean) {
 }
 
 function getObserver(obj: LazyConfig, id: string) {
-  const { container = null, offset, render, offscreen, noRemove } = obj;
+  const { container = null, element, offset, render, offscreen, noRemove } = obj;
+  const fixedContainer = getClosestFixedContainer(element);
   const observer = new IntersectionObserver(
     (entries) => {
       entries.forEach((en) => {
@@ -83,7 +85,7 @@ function getObserver(obj: LazyConfig, id: string) {
       });
     },
     {
-      root: container,
+      root: fixedContainer || container,
       rootMargin: `${offset}px`,
     },
   );

diff --git a/packages/shineout/src/image/__doc__/changelog.cn.md b/packages/shineout/src/image/__doc__/changelog.cn.md
@@ -1,3 +1,10 @@
+## 3.5.2-beta.10
+2024-10-27
+
+### 🐞 BugFix
+
+- 修复 `Image` 组件开启 `lazy` 后在 fixed 定位容器下检查交叉异常的问题 ([#820](https://github.com/sheinsight/shineout-next/pull/820))
+
 ## 3.4.5
 2024-10-31