![\"Image](\"image2.jpg\")
\n ![\"Large](\"large-image.jpg\")
\n \n \n );\n}\n```\n\n#### 语义化阈值\n\n```tsx\nimport { IntersectionLoad } from '@fly4react/observer';\n\nfunction App() {\n return (\n ![\"Image](\"image1.jpg\")
\n \n\n {/* 顶部可见时触发 */}\n \n ![\"Image\"](\"image.jpg\")
\n \n \n );\n}\n```\n\n#### 动态控制监听\n\n```tsx\nimport { IntersectionLoad } from '@fly4react/observer';\nimport { useState } from 'react';\n\nfunction App() {\n const [isActive, setIsActive] = useState(true);\n\n return (\n \n \n \n );\n}\n```\n\n#### 使用 onChange 回调\n\n```tsx\nimport { IntersectionLoad } from '@fly4react/observer';\nimport { useState } from 'react';\n\nfunction App() {\n const [visibilityCount, setVisibilityCount] = useState(0);\n\n return (\n 可见性变化次数: {visibilityCount}
\n \n\n \n \n );\n}\n```\n\n#### 自定义根容器\n\n```tsx\nimport { IntersectionLoad } from '@fly4react/observer';\nimport { useRef } from 'react';\n\nfunction App() {\n const containerRef = useRef\n \n 交叉比例: {(position.intersectionRatio * 100).toFixed(1)}%
\n是否相交: {position.isIntersecting ? '是' : '否'}
\n位置: ({position.boundingClientRect.x.toFixed(2)}, {position.boundingClientRect.y.toFixed(2)})
\n尺寸: {position.boundingClientRect.width.toFixed(2)} × {position.boundingClientRect.height.toFixed(2)}
\n元素位置: ({boundingRect.x.toFixed(2)}, {boundingRect.y.toFixed(2)})
\n元素尺寸: {boundingRect.width.toFixed(2)} × {boundingRect.height.toFixed(2)}
\n元素边界: 左{boundingRect.left.toFixed(2)}, 上{boundingRect.top.toFixed(2)}, 右{boundingRect.right.toFixed(2)}, 下{boundingRect.bottom.toFixed(2)}
\n交叉比例: {ratio !== undefined ? `${(ratio * 100).toFixed(1)}%` : '未计算'}
\n贴顶状态: {isCeiling ? '是' : '否'}
\n自定义条件状态: {isCustom ? '满足' : '不满足'}
\n中心区域状态: {isInCenter ? '在中心' : '不在中心'}
\n