detectOverflow

检测元素是否超出视口边界，计算各边的溢出距离。

前置依赖

依赖参数

参数名	类型	说明
deps.innerWidth	Window['innerWidth']	获取窗口内部宽度
deps.innerHeight	Window['innerHeight']	获取窗口内部高度

环境要求

• 浏览器环境: 使用 Window 对象的 innerWidth 和 innerHeight 属性

// 浏览器环境
const deps = {
  innerWidth: window.innerWidth,
  innerHeight: window.innerHeight
}

函数签名

function detectOverflow(
  elementRect: Rect,
  deps: DetectOverflowDeps,
  padding?: number
): { top: number; right: number; bottom: number; left: number }

interface DetectOverflowDeps {
  innerWidth: Window['innerWidth']
  innerHeight: Window['innerHeight']
}

interface Rect {
  x: number
  y: number
  width: number
  height: number
  top: number
  left: number
  right: number
  bottom: number
}

参数

参数名	类型	必填	默认值	说明
elementRect	Rect	是	-	元素的矩形信息
deps	DetectOverflowDeps	是	-	依赖注入对象
padding	number	否	0	内边距，用于在检测时预留安全距离

返回值

类型	说明
{ top: number; right: number; bottom: number; left: number }	各边超出视口的距离，正值表示超出的像素数，0 表示未超出

工作原理

1. 获取视口尺寸（innerWidth 和 innerHeight）
2. 计算视口的有效区域（减去 padding）：
   • 有效区域左边界 = padding
   • 有效区域上边界 = padding
   • 有效区域右边界 = innerWidth - padding
   • 有效区域下边界 = innerHeight - padding
3. 计算各边的溢出距离：
   • top = Math.max(0, padding - elementRect.top)
   • left = Math.max(0, padding - elementRect.left)
   • right = Math.max(0, elementRect.right - (innerWidth - padding))
   • bottom = Math.max(0, elementRect.bottom - (innerHeight - padding))
4. 返回溢出距离对象（值始终 ≥ 0）

padding 参数对所有四边都生效，可用于在边界检测时预留空白以改善视觉效果。