如何在WordPress中使用AMP Script实现滚动时为body添加类

AMP 页面限制了普通自定义 JavaScript 的执行，必须通过官方提供的 amp-script 组件来处理这类交互逻辑。以下是实现滚动时为 body 添加类的具体步骤：

1. 引入 amp-script 组件 #

首先在页面的 <head> 中添加 amp-script 组件的引用，这是 AMP 执行自定义脚本的必要前提：

<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>

2. 编写滚动监听脚本 #

在 <body> 中添加 amp-script 标签，内联处理滚动事件的逻辑。脚本会监听页面滚动，当滚动距离超过设定阈值时，为 body 添加指定类名，反之移除：

<amp-script layout="container" script="scroll-handler" data-hash="YOUR_SCRIPT_HASH">
  <script type="text/javascript" id="scroll-handler">
    // 自定义滚动触发阈值（单位：px）
    const SCROLL_TRIGGER = 50;
    const bodyEl = document.body;

    // 处理滚动逻辑的核心函数
    function updateBodyClass() {
      const scrollDistance = window.scrollY || document.documentElement.scrollTop;
      if (scrollDistance > SCROLL_TRIGGER) {
        bodyEl.classList.add('scrolled');
      } else {
        bodyEl.classList.remove('scrolled');
      }
    }

    // 节流函数优化性能，避免滚动事件频繁触发
    function throttle(func, delay = 150) {
      let lastExecution = 0;
      return function(...args) {
        const now = Date.now();
        if (now - lastExecution >= delay) {
          lastExecution = now;
          func.apply(this, args);
        }
      };
    }

    // 绑定滚动事件（使用节流优化）
    window.addEventListener('scroll', throttle(updateBodyClass));
    // 页面加载时执行一次，确保初始状态正确
    updateBodyClass();
  </script>
</amp-script>

关键注意事项 #

• 脚本哈希验证：AMP 要求内联脚本必须通过哈希验证以保证安全性。你需要计算上述内联脚本的 SHA-256 哈希值，替换代码中的 YOUR_SCRIPT_HASH。可以使用 AMP 官方提供的哈希生成工具或者本地计算工具完成。
• AMP 页面基础结构：确保你的页面是标准 AMP 页面，已包含 <html amp> 声明和 AMP 核心脚本引用。
• 性能优化：滚动事件触发频率很高，使用节流函数可以减少函数执行次数，避免页面卡顿。

为什么普通 JS/jQuery 不生效？ #

AMP 为了保证页面性能和安全性，禁止直接运行自定义的普通 JavaScript 或 jQuery 代码。所有交互逻辑必须通过 AMP 官方允许的组件（如 amp-script）来执行，否则代码会被 AMP 运行时拦截，无法生效。

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