如何使用 jQuery 根据文档宽度是否超出视口动态启用 CSS 滚动动画-html教程-PHP中文网

如何使用 jQuery 根据文档宽度是否超出视口动态启用 CSS 滚动动画

本文介绍如何通过 jQuery 监听窗口尺寸变化，精准判断页面内容是否横向溢出，并在满足条件（如 flex 容器宽度超过视口）时动态启用预定义的 CSS marquee 动画，避免无效触发与性能浪费。

本文介绍如何通过 jquery 监听窗口尺寸变化，精准判断页面内容是否横向溢出，并在满足条件（如 flex 容器宽度超过视口）时动态启用预定义的 css `marquee` 动画，避免无效触发与性能浪费。

在实际 Web 应用（尤其是工业 HMI 场景如 Ignition Perspective）中，常需为可滚动的水平列表（例如 ID 为 flexRepeater 的 Flex 容器）添加“跑马灯”式循环动画，但仅在内容真正溢出视口时才启用，以兼顾视觉效果与性能。原代码存在两个关键问题：一是 $(window).resize(applyAnimation()) 错误地立即执行了函数而非传入函数引用；二是依赖 $(document).width() 判断整体文档宽度，无法准确反映目标容器是否溢出——因为文档宽度可能受隐藏元素、body margin 或 iframe 等干扰，而真正决定是否需要动画的是该容器自身的实际内容宽度是否超过当前视口宽度。

推荐采用更鲁棒的检测方式：使用原生 DOM 属性 scrollWidth 获取元素内部完整内容宽度（含不可见部分），并与 window.innerWidth 对比。以下是优化后的完整实现：

$(document).ready(function () {
  function applyAnimation() {
    const $repeater = $("#flexRepeater");
    const repeater = $repeater[0];

    // 关键：使用 scrollWidth 精确获取 flex 容器内容总宽度
    const contentWidth = repeater ? repeater.scrollWidth : 0;
    const viewportWidth = window.innerWidth;

    if (contentWidth > viewportWidth) {
      // 启用 marquee 动画（确保 CSS 中已定义 @keyframes marquee）
      $repeater.css("animation", "marquee 20s linear infinite");
    } else {
      // 清除动画，避免残留或重复触发
      $repeater.css("animation", "none");
    }
  }

  // ✅ 正确绑定事件：传入函数引用，不加括号
  $(window).on("resize", applyAnimation);
  // ✅ 页面加载后立即执行一次检测
  applyAnimation();
});

注意事项：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

✅ 动画 CSS 需提前在样式表中正确定义，例如：

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

✅ 使用 scrollWidth 而非 $(document).width()，因其直接反映目标元素内容宽度，不受全局布局干扰；在 Ignition Perspective 环境中尤其可靠。
✅ 使用 "none" 替代空字符串清除动画，语义更明确且兼容性更好。
⚠️ 若 flexRepeater 是动态渲染内容（如由 Perspective 组件异步加载），请确保 applyAnimation() 在数据渲染完成后再调用——可在组件 onLoaded 回调或 setTimeout(..., 0) 微任务中触发二次检测。