Edge、Chrome、Brave浏览器<marquee behavior="slide">表现异常解决方案咨询

我开发了一个全景照片展示页面，逻辑如下：

• 当照片宽度大于窗口宽度时，使用<marquee behavior="scroll">，照片从右侧进入，滑出窗口左侧后再次从右侧出现，循环滚动
• 当照片宽度小于等于窗口宽度时，使用<marquee behavior="slide">，照片从右侧进入，待照片左侧抵达窗口左侧时停止滚动，完整停留在屏幕内

该逻辑在Firefox中运行正常，但在Edge、Brave浏览器中表现异常：使用slide行为时，照片会像scroll行为一样滑出屏幕左侧后才停止，无法完整留在屏幕内。

除了针对Edge、Brave单独适配为scroll行为外，还有其他解决方案吗？

页面中的复选框可用于在照片上显示文字（使用scroll行为时仅在末尾显示），这也是我改版页面的原因。

<marquee>是已废弃的HTML标签，不同浏览器对其行为的实现本身就存在兼容性差异，这也是你遇到问题的核心原因。推荐用以下两种更可靠的方案替代：

方案1：CSS动画（纯前端，无JS） #

通过CSS @keyframes 自定义滚动动画，根据照片和窗口的宽度动态控制动画行为：

1. 基础样式设置：

.panorama-container {
  overflow: hidden;
  width: 100vw;
  position: relative;
}

.panorama-img {
  position: absolute;
  top: 0;
  right: 0;
  white-space: nowrap;
}

2. 分场景定义动画：

• 照片宽度>窗口：循环滚动动画

@keyframes scroll-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.scroll-loop .panorama-img {
  animation: scroll-loop 20s linear infinite; /* 20s为滚动周期，可按需调整 */
}

• 照片宽度≤窗口：单次滑动后停在左侧

@keyframes slide-stop {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

.slide-stop .panorama-img {
  animation: slide-stop 3s ease-out forwards; /* forwards保持动画结束状态 */
}

3. JS动态切换动画类：

const container = document.querySelector('.panorama-container');
const img = container.querySelector('.panorama-img');

function updateAnimation() {
  const windowWidth = window.innerWidth;
  const imgWidth = img.offsetWidth;
  
  container.classList.remove('scroll-loop', 'slide-stop');
  if (imgWidth > windowWidth) {
    container.classList.add('scroll-loop');
  } else {
    container.classList.add('slide-stop');
  }
}

// 初始化+窗口尺寸变化时更新
updateAnimation();
window.addEventListener('resize', updateAnimation);

方案2：JavaScript控制滚动（更灵活） #

如果需要更精细的控制（比如调整滚动速度、监听滚动状态），可以用JS直接控制照片的位置：

const img = document.querySelector('.panorama-img');
const container = document.querySelector('.panorama-container');
let animationId;

function startScroll() {
  const windowWidth = window.innerWidth;
  const imgWidth = img.offsetWidth;
  
  // 清除之前的动画
  cancelAnimationFrame(animationId);
  
  if (imgWidth > windowWidth) {
    // 循环滚动逻辑
    let position = 0;
    const speed = 2; // 滚动速度，可调整
    function loopScroll() {
      position -= speed;
      if (position <= -imgWidth) {
        position = windowWidth;
      }
      img.style.transform = `translateX(${position}px)`;
      animationId = requestAnimationFrame(loopScroll);
    }
    loopScroll();
  } else {
    // 滑动停止逻辑
    let position = windowWidth;
    const speed = 3;
    function slideToStop() {
      position -= speed;
      if (position <= 0) {
        position = 0;
        cancelAnimationFrame(animationId);
      }
      img.style.transform = `translateX(${position}px)`;
      animationId = requestAnimationFrame(slideToStop);
    }
    slideToStop();
  }
}

// 初始化+窗口尺寸变化时触发
startScroll();
window.addEventListener('resize', startScroll);

这两种方案都能避免<marquee>的兼容性问题，且行为可控性更强，适配所有现代浏览器（包括Edge、Brave、Firefox）。

内容的提问来源于stack exchange，提问作者Globetrotter