Prevent body scrolling when Overlay is shown in AMP

Question

Is there any way I can disable scroll on <body> in AMP when an overlay is shown?

This is what I've tried:

.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>

However, following is visible in console which means AMP is forcing to always show overflow for <html> and <body>

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

I've looked into documentation and HTML Specs of AMP but unable to find anything.

score 0 · Answer 1 · answered Dec 08 '17 at 12:12

0

You can use amp-lightbox (https://ampbyexample.com/components/amp-lightbox/) to create an overlay that disables scrolling the background. This could be a good option if there's not a reason you've avoided using it.

answered Dec 08 '17 at 12:12

user2102427

23
1
5

1

often it's not an option since you need some other elements be active outside of overlay. Like navbar or header – Vitalii Korsakov Nov 12 '19 at 15:40

Prevent body scrolling when Overlay is shown in AMP

1 Answers1