アニメーション中に垂直スクロールバーが表示されます

Question

divをアニメーション化しようとしていますが、望ましくない垂直スクロールバーが表示されている以外はすべて問題ありません。私は解決策を探しましたが、私は本体のみ、HTML {オーバーフロー：隠された}を見つけ、これは動作しますが、問題は他の要素もhidden.Hereの私のコードですです： -

.main-content { 
 
    position: relative; 
 
    height: 500px; 
 
} 
 

 
.box-container { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.box-container ul { 
 
    list-style: none; 
 
} 
 
.box-container .box { 
 
    display: inline-block; 
 
    height: 100px; 
 
    width: 100px; 
 
    background: pink; 
 
    border-radius: 50%; 
 
    opacity: 0; 
 
} 
 

 
.animate1 { 
 
    animation: animate .5s ease-in-out forwards; 
 
} 
 

 
.animate2 { 
 
    animation: animate .5s ease-in-out .5s forwards; 
 
} 
 

 
.animate3 { 
 
    animation: animate .5s ease-in-out 1.0s forwards; 
 
} 
 

 
@keyframes animate { 
 
    0% { 
 
    opacity: 0; 
 
    transform: translateY(1000px); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    transform: translateY(0px); 
 
    } 
 
} 
 
p { 
 
    max-width: 80%; 
 
    margin: 0 auto; 
 
}

<div class="main-content"> 
 
    <div class="box-container"> 
 
     <ul class="list-unstyle list-inline"> 
 
      <li class="box animate1"></li> 
 
      <li class="box animate2"></li> 
 
      <li class="box animate3"></li> 
 
     </ul> 
 
    </div> 
 
</div> 
 
<div> 
 
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div>

Answer 1

の代わりに1000pxからアニメーションを開始する場合、calc(100vh - 250px)を使用できます。これらの値は指定した値に基づいています。 、心配ない：その作品の仲間

.main-content { 
 
    position: relative; 
 
    height: 500px; 
 
} 
 
.box-container { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.box-container ul { 
 
    list-style: none; 
 
} 
 
.box-container .box { 
 
    display: inline-block; 
 
    height: 100px; 
 
    width: 100px; 
 
    background: pink; 
 
    border-radius: 50%; 
 
    opacity: 0; 
 
} 
 
.animate1 { 
 
    animation: animate .5s ease-in-out forwards; 
 
} 
 
.animate2 { 
 
    animation: animate .5s ease-in-out .5s forwards; 
 
} 
 
.animate3 { 
 
    animation: animate .5s ease-in-out 1.0s forwards; 
 
} 
 
@keyframes animate { 
 
    0% { 
 
    opacity: 0; 
 
    transform: translateY(calc(100vh - 250px)); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    transform: translateY(0px); 
 
    } 
 
} 
 
p { 
 
    max-width: 80%; 
 
    margin: 0 auto; 
 
}

<div class="main-content"> 
 
    <div class="box-container"> 
 
    <ul class="list-unstyle list-inline"> 
 
     <li class="box animate1"></li> 
 
     <li class="box animate2"></li> 
 
     <li class="box animate3"></li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div>