Question

我在Google Web Designer中制作了一个AMPHTML示例，使用了3个页面。在移动设备上，我发现可以在示例运行时滚动/滑动这些页面。那当然不应该发生。如何阻止这种情况发生？

该示例仅显示3个矩形，每页1个。从第1页到第2页到第3页。当我在iPhone上查看该示例时，仍然可以从一页滑到另一页。有没有一种方法可以阻止这种情况，以便只注册一个水龙头，但我无法在幻灯片之间滑动？

<!DOCTYPE html>
<html amp4ads="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <meta name="generator" content="Google Web Designer 5.1.1.0611">
  <meta name="environment" content="gwd-dv360">
  <script async="" src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
  <style amp4ads-boilerplate>body{visibility:hidden}</style>
  <style amp-custom="">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0px;
    }
    p, h1, h2, h3 {
      margin: 0px;
    }
    .gwd-page-container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .gwd-page-content {
      background-color: transparent;
      transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      transform-style: preserve-3d;
      position: absolute;
    }
    .gwd-page-container-wrapper {
      width: 300px;
      height: 250px;
    }
    .gwd-page-wrapper {
      background-color: rgb(255, 255, 255);
      position: absolute;
      top: 0px;
      left: 0px;
      transform: translateZ(0px);
      width: 300px;
      height: 250px;
    }
    .gwd-page-size {
      width: 300px;
      height: 250px;
    }
    #pagedeck > .amp-carousel-button-prev, #pagedeck > .amp-carousel-button-next {
      display: none;
    }
    .gwd-div-1fti {
      position: absolute;
      width: 220px;
      height: 164px;
      left: 39px;
      top: 38px;
      background-image: none;
      background-color: rgb(48, 199, 164);
    }
    .gwd-div-vk6e {
      background-color: rgb(48, 68, 199);
    }
  </style>
  <script data-source="https://cdn.ampproject.org/v0/amp-gwd-animation-0.1.js" async="" custom-element="amp-gwd-animation" src="https://cdn.ampproject.org/v0/amp-gwd-animation-0.1.js"></script>
  <script data-source="https://cdn.ampproject.org/v0/amp-ad-exit-0.1.js" async="" custom-element="amp-ad-exit" src="https://cdn.ampproject.org/v0/amp-ad-exit-0.1.js"></script>
  <script data-source="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async="" custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
</head>

<body class="document-body">
  <div class="gwd-page-container-wrapper">
    <amp-carousel class="gwd-page-container" id="pagedeck" layout="fill" type="slides">
      <div id="page1" class="gwd-page-wrapper page1-content" data-gwd-width="300px" data-gwd-height="250px" role="button" tabindex="-1">
        <div class="gwd-page-content gwd-page-size">
          <div class="gwd-div-1fti"></div>
          <div class="gwd-animation-event event-1-animation" data-event-name="event-1" data-event-time="2100"></div>
        </div>
      </div>
      <div id="page1_1" class="gwd-page-wrapper page1-content" data-gwd-width="300px" data-gwd-height="250px">
        <div class="gwd-page-content gwd-page-size">
          <div class="gwd-div-1fti gwd-div-vk6e"></div>
        </div>
      </div>
    </amp-carousel>
  </div>
  <amp-gwd-animation id="gwdAnim" timeline-event-prefix="tl_" layout="nodisplay" on="tl_event-1:pagedeck.goToSlide(index=1)"></amp-gwd-animation>
  <amp-ad-exit id="exit-api">
    <script type="application/json">{ "targets": {} }
    </script>
  </amp-ad-exit>
</body>

</html>

如何禁用在AMPHTML幻灯片中滚动？

0 个答案: