export interface VisibleDomRect { bottom: number; height: number; left: number; right: number; top: number; width: number; } /** * 获取元素可见信息 * @param element */ export function getElementVisibleRect( element?: HTMLElement | null | undefined, ): VisibleDomRect { if (!element) { return { bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0, }; } const rect = element.getBoundingClientRect(); const viewHeight = Math.max( document.documentElement.clientHeight, window.innerHeight, ); const top = Math.max(rect.top, 0); const bottom = Math.min(rect.bottom, viewHeight); const viewWidth = Math.max( document.documentElement.clientWidth, window.innerWidth, ); const left = Math.max(rect.left, 0); const right = Math.min(rect.right, viewWidth); return { bottom, height: Math.max(0, bottom - top), left, right, top, width: Math.max(0, right - left), }; } export function getScrollbarWidth() { const scrollDiv = document.createElement('div'); scrollDiv.style.visibility = 'hidden'; scrollDiv.style.overflow = 'scroll'; scrollDiv.style.position = 'absolute'; scrollDiv.style.top = '-9999px'; document.body.append(scrollDiv); const innerDiv = document.createElement('div'); scrollDiv.append(innerDiv); const scrollbarWidth = scrollDiv.offsetWidth - innerDiv.offsetWidth; scrollDiv.remove(); return scrollbarWidth; } export function needsScrollbar() { const doc = document.documentElement; const body = document.body; // 检查 body 的 overflow-y 样式 const overflowY = window.getComputedStyle(body).overflowY; // 如果明确设置了需要滚动条的样式 if (overflowY === 'scroll' || overflowY === 'auto') { return doc.scrollHeight > window.innerHeight; } // 在其他情况下,根据 scrollHeight 和 innerHeight 比较判断 return doc.scrollHeight > window.innerHeight; } export function triggerWindowResize(): void { // 创建一个新的 resize 事件 const resizeEvent = new Event('resize'); // 触发 window 的 resize 事件 window.dispatchEvent(resizeEvent); }