在 CSS 中停止生成不需要的滚动

Question

我从一个大约 animate.css 的网站上得到了很少的代码。我面临的问题是，当页面加载时，它会产生太多滚动。如果我使用 bounceInRight 或 bounceInLeft 生成左滚动或右滚动，当我使用 bounceInUp 或 bounceInDown 时它生成垂直滚动，当我最小化屏幕然后最大化该滚动时自动删除。这是我的 CSS 和 HTML

<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

Answer 1

带来很多高度的是你给 #logo 的 570px。你真的需要它吗？如果您不执行 position: absolute.

之类的操作，徽标内的文本块会为其父级提供自然高度

您的问题应该通过将 overflow-y: hidden; 添加到 #logo 来解决。

示例：http://codepen.io/brav0/pen/ENrKXR?editors=1100

在 CSS 中停止生成不需要的滚动

Stop Generating Unwanted Scrolling in CSS

css

displaytag

animate.css