本文详解如何通过动态检测元素可视区域位置，精准控制 `margin-left` 实现 marquee 内悬浮详情框（`.details`）的完整显示，避免因滚动偏移引发的错位、重叠或误触发问题。
在实现横向循环滚动的 Marquee 组件时，一个常见但易被忽视的问题是：当 .details 悬浮面板随父级 标签一起滚动出视口后，若用户随后悬停到仍在屏幕内的其他项，该面板可能因残留的 margin-left 偏移而错位显示，甚至干扰相邻 Marquee 实例（如双列表镜像结构）。你尝试用 setInterval 配合 getBoundingClientRect() 动态调整样式，但仅做单向判断（left ✅ 正确解法是引入双向边界检测：不仅识别“即将/已经移出左边界”，更要识别“完全进入右边界外侧”，并在此时重置样式。如下代码即为优化后的核心逻辑： ⚠️ 关键注意事项： ? 进阶提示：现代开发中，应优先考虑用 CSS @keyframes + animation 替代 JavaScript Marquee（如 scroll-snap + transform: translateX()），再配合 :hover 控制详情显示，既语义清晰又无 JS 偏移副作用。若必须用 JS，建议封装为类，支持暂停/恢复/速率调节等 API。 综上，精准的边界判定 + 合理的重置机制 + 性能意识，是解决 Marquee 悬浮内容显示异常的核心三要素。const details = document.querySelectorAll('.details');
const DETAILS_WIDTH = 600; // 建议通过 getComputedStyle 或 offsetWidth 动态获取，而非硬编码
setInterval(() => {
details.forEach((detail) => {
const rect = detail.getBoundingClientRect();
// 左侧移出：添加大间距，推动内容回流至可视区右侧
if (rect.left <= -50) {
detail.style.marginLeft = '30rem';
}
// 右侧完全移出：重置 margin，避免影响后续渲染
else if (rect.left >= window.innerWidth + DETAILS_WIDTH) {
detail.style.marginLeft = '0';
}
});
}, 30); // 将 1ms 改为 30ms，避免过度触发，提升性能
镜像结构本身合理，但需确保两个列表内 .details 元素具有唯一可区分的选择器（如添加 data-index），避免逻辑误判。
