Как отключить прокрутку слайдов AMPHTML? - PullRequest
Новая
       34

Как отключить прокрутку слайдов AMPHTML?

0 голосов
/ 19 июня 2019

Я сделал образец AMPHTML в Google Web Designer, который использует 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>
...