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 回答