html: overflow issue on mobile-CodePudding

I'm having an issue with parallax effect on mobile. In fact it seems like that total body size is > 100vh (it also appear the scroll bar o the side). Obv if I change overflow-y from auto to hidden, it fix the problem but it also cut out part of the page. On desktop it doesn't happen. Can anybody help me?

Screenshot:

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

body {
  background-color: #333;
}

.module {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
}

<div >
  <div >20%</div>
  <div >40%</div>
  <div >60%</div>
  <div >80%</div>
  <div >100%</div>
</div>

CodePudding user response：

Fix 100vh Issue on Mobile Devices Using CSS Only

Sometimes, the purpose of using vh unit is to simply create sections equal to the height of the viewport. This is common when you are building landing pages, for instance. In these situations, position sticky won’t help and I want to introduce the fill-available property. It’s easy to use, just remember to use the prefixes and the fall-back value:

.layout {
  min-height: 100vh;            /* fall-back */
  min-height: -moz-available;
  min-height: -webkit-fill-available;
  min-height: fill-available;
}

Just as simple as that!