文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >AMP: amp-script未运行

问AMP: amp-script未运行
EN

Stack Overflow用户
提问于 2020-08-28 09:28:25
回答 1查看 1.1K关注 0票数 0

当窗口开始滚动时，我正在尝试使用amp-script在nav (顶部菜单栏)上切换一个类。其效果是将固定的nav从半透明变为纯白色。

这是我尝试过的.

​

代码语言：javascript
复制
<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>My AMP Page</title>
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
  <style amp-custom>
    nav {
      position: fixed;
      top: 0;
      width: 100vw;
      color: white;
      background-color: rgba(0, 0, 0, 0.2);
      z-index: 10;
      text-align: center;
    }

    .opaque {
      background-color: white;
      color: black;
    }

    .hero {
      height: max(25vh, 250px);
      width: 100vw;
      background: red;
    }

    .spacer {
      height: 4em;
      background: blue;
      margin: 0.5em;
    }
  </style>
  <meta name="amp-script-src" content="sha384-bpf6fazoofAb6S1aK0_hOIa1g6nDaC_SPbTuSJsMxEzAPc11oKjAnJZmeFAMKc2p ">
</head>
<body>
  <script id="scroll-listener" type="text/plain" target="amp-script">
    document.addEventListener("scroll", myFunction);

    function myFunction() {
      console.log('scrolled!!');
      if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("topnav").className = "opaque";
      } else {
        document.getElementById("topnav").className = "";
      }
    }
  </script>
  <nav id="topnav">
    <h1>ACME Inc.</h1>
  </nav>
  <main>
    <header class="hero"></header>
    <article>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
      <div class="spacer"></div>
    </article>
  </main>
</body>
</html>

​

不幸的是，这个脚本根本没有效果。我还放置了console.log语句，以查看是否报告了任何滚动事件-控制台中什么也没有显示。

你知道我哪里做错了吗？

更新:为了确保这是一个“非AMP”页面，我更改了上面示例中的代码行：

代码语言：javascript
复制
<script id="scroll-listener" type="text/plain" target="amp-script">...</script>

对这个..。

代码语言：javascript
复制
<script id="scroll-listener" type="text/javascript">...</script>

该站点的运行情况与预期一致。因此，我确信所编写的javascript做了我想让它做的事情。问题完全出在AMP处理脚本的方式上。

amp-html
javascript
scroll
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-02 17:47:41

显然，您不了解amp-script是如何工作的，这很奇怪，因为官方文档中有示例。

试一下这个例子：

​

代码语言：javascript
复制
<!DOCTYPE html>
<html ⚡>
  <head>
    <meta charset="utf-8" />
    <title>My AMP Page</title>
    <link rel="canonical" href="self.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
    <style amp-boilerplate>
      body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      }
      @-webkit-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-moz-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-ms-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-o-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
    </style>
    <noscript
      ><style amp-boilerplate>
        body {
          -webkit-animation: none;
          -moz-animation: none;
          -ms-animation: none;
          animation: none;
        }
      </style></noscript
    >
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <meta name="amp-script-src" content="sha384-nPCFvs2yYOVX1DFcHvkEUY1aC6PdG8FAgPUG16rZwxfQJOPh_pM1rA-oUzDsg8pk" />
    <style amp-custom>
      nav {
        position: fixed;
        top: 0;
        width: 100vw;
        color: white;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 10;
        text-align: center;
      }

      .opaque {
        background-color: white;
        color: black;
      }

      .hero {
        height: max(25vh, 250px);
        width: 100vw;
        background: red;
      }

      .spacer {
        height: 4em;
        background: blue;
        margin: 0.5em;
      }
    </style>
  </head>
  <body>
    <amp-script script="scroll-listener">
      <nav id="topnav">
        <h1>ACME Inc.</h1>
      </nav>
      <main id="main">
        <header class="hero"></header>
        <article>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
          <div class="spacer"></div>
        </article>
      </main>
    </amp-script>

    <script id="scroll-listener" type="text/plain" target="amp-script">
      function myFunction(event) {
        console.log('scrolled!!');
      }
      window.addEventListener("scroll", myFunction);
    </script>
  </body>
</html>

​

上面的例子可能不会帮你做你想做的事情，但至少现在你会明白amp-script是如何工作的。

amp-script通常需要触发自定义事件，并且不会在页面加载后立即工作。点击此处阅读：https://amp.dev/documentation/components/amp-script/?format=websites#user-gestures

要完成这项任务，我建议您使用amp-position-observer和amp-animation组件。下面是一个示例：

​

代码语言：javascript
复制
<!DOCTYPE html>
<html ⚡>
  <head>
    <meta charset="utf-8" />
    <title>My AMP Page</title>
    <link rel="canonical" href="self.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
    <style amp-boilerplate>
      body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      }
      @-webkit-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-moz-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-ms-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-o-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
    </style>
    <noscript
      ><style amp-boilerplate>
        body {
          -webkit-animation: none;
          -moz-animation: none;
          -ms-animation: none;
          animation: none;
        }
      </style></noscript
    >
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
    <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>

    <style amp-custom>
      nav {
        position: fixed;
        top: 0;
        width: 100vw;
        color: cyan;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 10;
        text-align: center;
      }

      h1 {
        position: relative;
        z-index: 2;
      }

      .opaque {
        background-color: white;
        color: black;
      }

      .hero {
        height: max(25vh, 250px);
        width: 100vw;
        background: red;
      }

      .spacer {
        height: 4em;
        background: blue;
        margin: 0.5em;
      }

      .scroll-effect {
        background-color: #fff;
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }

      .top-anchor {
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="top-anchor">
      <amp-position-observer on="enter:hideAnim.start; exit:showAnim.start" layout="nodisplay"></amp-position-observer>
    </div>
    <nav id="topnav">
      <span class="scroll-effect" id="scroll-effect"></span>
      <h1>ACME Inc.</h1>
    </nav>
    <main id="main">
      <header class="hero"></header>
      <article>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
        <div class="spacer"></div>
      </article>
    </main>

    <amp-animation id="showAnim" layout="nodisplay">
      <script type="application/json">
        {
          "duration": "200ms",
          "fill": "both",
          "iterations": "1",
          "direction": "alternate",
          "animations": [
            {
              "selector": "#scroll-effect",
              "keyframes": [
                {
                  "opacity": "1",
                  "visibility": "visible"
                }
              ]
            }
          ]
        }
      </script>
    </amp-animation>
    <amp-animation id="hideAnim" layout="nodisplay">
      <script type="application/json">
        {
          "duration": "200ms",
          "fill": "both",
          "iterations": "1",
          "direction": "alternate",
          "animations": [
            {
              "selector": "#scroll-effect",
              "keyframes": [{ "opacity": "0", "visibility": "hidden" }]
            }
          ]
        }
      </script>
    </amp-animation>
  </body>
</html>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/63626211

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档