2
オーバレイが表示されているときにAMPで<body>のスクロールを無効にする方法はありますか？オーバレイがAMPで表示されている場合のボディのスクロールを防止
これは私が試した次のとおりです。ただし、以下のことはAMPは常に<html>ためoverflowと<body>
html.i-amphtml-singledoc>body {
overflow: visible!important;
position: relative!important;
}
.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>を
私はdocumentation and HTML Specs of AMPを調べましたが、unab何かを見つけるために