4

有什么方法可以<body>在显示叠加层时禁用 AMP 中的滚动功能？

这是我尝试过的：

.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;
}
<!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>

但是，在控制台中可以看到以下内容，这意味着 AMP 强制始终overflow显示<html><body>

html.i-amphtml-singledoc>body {
    overflow: visible!important;
    position: relative!important;
}

我查看了 AMP 的文档和 HTML 规范，但找不到任何东西。

4

1 回答 1

0

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

于 2017-12-08T12:12:44.867 回答