CSS에서 원하지 않는 스크롤 생성 중지

웹 사이트에서 animate.css에 대한 코드가 거의 없습니다. 내가 직면하고있는 문제는 페이지로드시 스크롤이 너무 많이 생성된다는 것입니다. 왼쪽 또는 오른쪽 스크롤을 생성하는 경우 bounceInRight 또는 bounceInLeft를 사용하고 bounceInUp 또는 bounceInDown을 사용하면 수직 스크롤을 생성하고 화면을 최소화 한 다음 자동으로 제거되는 해당 스크롤을 최대화 할 때 사용합니다. 여기 내 CSS와 HTMLCSS에서 원하지 않는 스크롤 생성 중지

<div id="logo"> 
     <span id="a"> 
      <span class="dd animated bounceInUp">A</span> 
     </span> 

     <span id="leading"> 
      <span class="da animated bounceInUp">Leading</span> 
     </span> 


     <div> 
     <span id="mep"> 
      <span class="zz animated bounceInUp">MEP</span> 
     </span> 

     <span id="integrated"> 
      <span class="zn animated bounceInUp">INTEGRATED</span> 
     </span> 
     </div> 


     <div> 
     <span id="solution"> 
      <span class="dr animated bounceInUp">Solutions</span> 
     </span> 


     <span id="provider"> 
      <span class="de animated bounceInUp">Provider</span> 
     </span> 


     </div> 

    </div>

및 CSS

<style> 

    #logo      { color:#000; font-family: 'Montserrat', sans-serif; text-align:center; margin-top:150px; height:570px; } 
    #logo span     { display:inline-block; } 
    #logo #a     {margin-right: 10px; font-size:40px; } 
    #logo #leading     {font-size:40px; } 
    #logo #mep     {margin-right: 20px; font-size:80px;} 
    #logo #integrated     { font-size:80px; } 
    #logo #solution      {margin-right: 20px; font-size:50px;} 
    #logo #provider      {font-size:50px;} 

    @media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

    #logo      { color:#000; font-family: 'Montserrat', sans-serif; text-align:center; margin-top:150px;} 
    #logo span     { display:inline-block; } 
    #logo #a     {margin-right: 20px; font-size:15px; } 
    #logo #leading    {font-size:15px; } 
    #logo #mep     {font-size:30px;} 
    #logo #integrated   { font-size:30px; } 
    #logo #solution    {margin-right: 20px; font-size:20px;} 
    #logo #provider    {font-size:20px;} 




/* logo */ 

    .dd       { animation-delay:0.2s; -moz-animation-delay:0.2s; -webkit-animation-delay:0.2s; } 
    .da       { animation-delay:0.8s; -moz-animation-delay:0.8s; -webkit-animation-delay:0.8s; } 
    .dn       { animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; } 
    .dg       { animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s; } 
    .de       { animation-delay:0.4s; -moz-animation-delay:0.4s; -webkit-animation-delay:0.4s; } 
    .dr       { animation-delay:1.2s; -moz-animation-delay:1.2s; -webkit-animation-delay:1.2s; } 

    .zz       { animation-delay:1.4s; -moz-animation-delay:1.4s; -webkit-animation-delay:1.4s; } 
    .zo       { animation-delay:0.4s; -moz-animation-delay:0.4s; -webkit-animation-delay:0.4s; } 
    .zn       { animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; } 
    .ze       { animation-delay:0.5s; -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; } 

}

데모 http://abskillz.com/bkg-new/ch.html

출처

2016-12-18 Abdullah

높이의 많은 당신이 #logo에 제공하는 570px입니다 가져다 것입니다. 너 정말 필요해? 로고 안의 텍스트 블록은 position: absolute과 같은 것을하지 않으면 부모에게 자연스러운 높이를줍니다.

#logo에 overflow-y: hidden;을 추가하여 문제를 해결해야합니다.

예 : http://codepen.io/brav0/pen/ENrKXR?editors=1100

출처

2016-12-18 20:49:14

CSS에서 원하지 않는 스크롤 생성 중지

답변

관련 문제