Marquee滚动组件问题：添加margin修复显示异常引发其他元素故障

安全阿岳

2026-7-15

问题解决：Marquee滚动组件中Hover详情显示异常及错误Margin问题

问题现象

开发带marquee滚动效果的无序列表组件时碰到两个问题：

鼠标hover <a> 标签显示details详情框时，因marquee持续滚动，当文本部分移出屏幕后，详情框只能显示一半
尝试用循环检测元素位置并添加margin修复，但第二个marquee的元素即使完全在屏幕内，hover时仍被错误添加margin，删除第二个marquee或调整循环逻辑都无法解决

问题根源

原代码仅判断元素left <= -50就设置margin，但未在元素回到可视区域时重置margin，导致状态一直保留
setInterval(1ms)过于频繁，不仅性能差，还会重复触发不必要的样式修改
第二个marquee是第一个的镜像副本，初始位置可能处于检测阈值范围内，导致被误判为移出屏幕

修复方案

改用Intersection Observer API替代定时器检测，精准判断元素可视状态；通过类名控制样式，便于状态重置：

步骤1：添加CSS类

.details.shifted {
  margin-left: 30rem;
}

步骤2：替换JavaScript逻辑

const details = document.querySelectorAll('.details');

// 配置观察器：检测元素是否部分移出左侧视口
const observerOptions = {
  root: null, // 视口作为根容器
  rootMargin: '0px',
  threshold: 0.5 // 元素50%以上移出时触发
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 元素移出左侧视口时添加类，否则移除
    if (!entry.isIntersecting && entry.boundingClientRect.left <= -50) {
      entry.target.classList.add('shifted');
    } else {
      entry.target.classList.remove('shifted');
    }
  });
}, observerOptions);

// 观察所有details元素
details.forEach(detail => observer.observe(detail));