2

私がやろうとしているのは、ページのさまざまな部分を上にスライドさせて、前の部分を隠すことです。http://johnpolacek.github.com/superscrollorama/で、特に「ワイプイット」の部分でやりたいことを見つけました。コードの一部をコピーして、同じjavascriptファイルを含めてみました。

Firefoxでは動作します。ただし、ChromeとIEでは、下にスクロールしようとすると、スクロールバーが揺れてページの上部に戻ります。

私はそれをサイトに持っていません、しかし私は私が使っているファイルを持っています：http ://www.mediafire.com/?h28etrbr5t24qyw

任意の助け（またはより実用的な代替手段）をいただければ幸いです。

4

1 に答える 1

2

ええ、それはかなりクールに見えます。コードをゼロから作成するだけで、希望どおりにコードを取得できます。本当に基本的なものを作成しました。ワイプ ダウンする赤い div を含む青いメイン div。明らかに、両方の div に必要なものを配置できます。コードは次のとおりです。

<!doctype html>
<html>
  <head>
    <style type='text/css'>
      body{
        margin: 0px;
      }
      #wipeScreen{
        position: fixed;  
        width: 100%;                  
        background-color: red;
      }

      #mainScreen{
        position: absolute;
        background-color: blue;
        height: 200%;
        width: 100%;
      }
    </style>
    <script type='text/javascript'>
      var visHeight;
      function loadConstants(){
        visHeight = Math.ceil(document.getElementById("mainScreen").offsetHeight/2);
        var wipeScreen = document.getElementById("wipeScreen");
        wipeScreen.style.height = visHeight+"px";
        wipeScreen.style.top = -visHeight+"px";
        window.onscroll = runScroller;
      }
      function runScroller(){
        document.getElementById("wipeScreen").style.top = pageYOffset-visHeight+"px";
      }    
    </script>        
  </head>
  <body onload='loadConstants()'>
    <div id='mainScreen'></div>
    <div id='wipeScreen'></div>  
  </body>
</html>

それをコピーして HTML ドキュメントに貼り付けると、私の言いたいことがわかるでしょう。

于 2012-07-04T05:34:58.413 に答える