Question

当显示叠加层时，我是否可以禁用AMP中<body>上的滚动？

这是我尝试过的：

＆＃13;

.noscroll {
  overflow: hidden;
}
.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition: opacity 200ms ease-in-out;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
}
.overlay.show {
    visibility: visible;
    opacity: 1;
}
.taptoclose {
  position: absolute;
  top: 100px;
  background: #fff;
  padding 30px;
  color: #000;
  margin: auto;
  font-size: 18px;
}

＆＃13;

<!DOCTYPE html>
<html amp>
<head>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body [class]="noscrollBody ? 'noscroll' : ''" on="tap:AMP.setState({
    showOverlay: true,
    noscrollBody: true
  })">

<h4>Dummy data to show scroll. Tap anywhere to show Overlay.</h4>
<h4>Dummy data to show scroll. Tap anywhere to show Overlay.</h4>
<h4>Dummy data to show scroll. Tap anywhere to show Overlay.</h4>
<h4>Dummy data to show scroll. Tap anywhere to show Overlay.</h4>
<h4>Dummy data to show scroll. Tap anywhere to show Overlay.</h4>
<h4>Dummy data to show scroll. Tap anywhere to show Overlay.</h4>
<h4>Dummy data to show scroll. Tap anywhere to show Overlay.</h4>
<h4>Dummy data to show scroll. Tap anywhere to show Overlay.</h4>
<h4>Dummy data to show scroll. Tap anywhere to show Overlay.</h4>
<h4>Dummy data to show scroll. Tap anywhere to show Overlay.</h4>
<h4>Dummy data to show scroll. Tap anywhere to show Overlay.</h4>
<h4>Dummy data to show scroll. Tap anywhere to show Overlay.</h4>
<h4>Dummy data to show scroll. Tap anywhere to show Overlay.</h4>
<h4>Dummy data to show scroll. Tap anywhere to show Overlay.</h4>
<h4>Dummy data to show scroll. Tap anywhere to show Overlay.</h4>

<div class="overlay" [class]="showOverlay ? 'overlay show' : 'overlay'" on="tap:AMP.setState({
    showOverlay: false,
    noscrollBody: false
  })">
</div>
</body>

＆＃13;

但是，以下内容在控制台中可见，这意味着AMP强制始终显示overflow和<html>的{{1}}

<body>

我已查看documentation and HTML Specs of AMP但无法找到任何内容。

Answer 1

您可以使用amp-lightbox（https://ampbyexample.com/components/amp-lightbox/）创建禁用滚动背景的叠加层。如果您没有理由避免使用它，这可能是一个不错的选择。

在AMP中显示叠加时防止正文滚动

1 个答案: