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

【问题标题】：Stop Generating Unwanted Scrolling in CSS停止在 CSS 中生成不需要的滚动
【发布时间】：2016-12-18 20:30:33
【问题描述】：

我从一个关于 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

【问题讨论】：

标签： css displaytag animate.css

【解决方案1】：

带来很多高度的是你给#logo的570px。你真的需要吗？如果您不执行position: absolute 之类的操作，则徽标内的文本块会为其父级提供自然高度。

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

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

【讨论】：