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

时间:2016-12-18 20:30:34

标签: css displaytag animate.css

我从网站上得到的关于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; }

}

demo http://abskillz.com/bkg-new/ch.html

1 个答案:

答案 0 :(得分:1)

带来很多高度的东西是你给Sub extract() Dim IE As InternetExplorer Dim html As HTMLDocument Set IE = New InternetExplorerMedium IE.Visible = False IE.Navigate2 "C:\Users\john\Documents\Test.html" ' Wait while IE loading Do While IE.Busy Application.Wait DateAdd("s", 1, Now) Loop Set html = IE.document Set holdingsClass = html.getElementsByClassName("right-header") Dim results As Variant results = Split(holdingsClass(0).textContent, vbLf) cntr = 1 For i = LBound(results) To UBound(results) If Trim(results(i)) <> "" Then Select Case Right(Trim(results(i)), 1) Case "<div>" Range("B" & cntr) = CStr(Trim(results(i))) Case "%" Range("C" & cntr).Value = Trim(results(i)) cntr = cntr + 1 Case 0 Range("C" & cntr).Value = Trim(results(i)) Case Else Range("A" & cntr).Value = Trim(results(i)) End Select End If Next i Sheets("Sheet3").Range("A1").Value = holdingsClass(0).textContent 'Cleanup IE.Quit Set IE = Nothing End Sub 的570px。你真的需要它吗?如果您不执行#logo之类的任何操作,则徽标内的文本块会为其父级提供自然高度。

应通过向position: absolute添加overflow-y: hidden;来解决您的问题。

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