Question

我有一个包含大量内容的经典页面，以及一个打开弹出窗口的按钮。这个pop的高度比我的窗口大，所以我需要在弹出窗口内滚动。当我隐藏我的触发器时，我希望与显示此弹出窗口之前的滚动位置完全相同。我尝试了很多解决方案，而且......这不完全是:) 您可以在JSfiddle上看到一个示例：http://jsfiddle.net/S6EFW/

你可以在今日美国网站上看到我想做的事：http://www.usatoday.com/

如果您滚动一下，然后单击其中一篇主文章，则会显示一个弹出窗口。您可以在此弹出窗口中滚动。关闭弹出窗口时，与打开弹出窗口的位置完全相同。

我的代码：

  $( "#launch" ).click(function() {
  $( "#popup" ).fadeToggle( "slow", function() {

  });
    $( "#content" ).toggleClass( "whenloaded" );

  });

当您显示弹出窗口时，在内容上添加了一个类：

 .whenloaded {
  position : fixed;
 }

如果你有想法实现这一点！非常感谢社区：）

Answer 1

如果我是对，this will be close to what you are after

修改：Updated Fiddle

相关的CSS：

html,body{ 
   margin:0; padding:0; height:100%; width:100%; position:absolute; top:0; left:0; overflow:hidden; 
}
#content{
    overflow-y:scroll;
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
}
#launch{
    position:absolute;
    top:0;
    left:0;
    z-index:999;
    background:white;
    padding:4px;
    border:1px solid grey;
}
#overlay{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    display:none;
    z-index:99;
    text-align:center;
}
#mask{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:blue;
    opacity:0.5;
}
#popup{
    z-index:100;
    position:relative;
    width:60%;
    top:20%;
    margin:auto;
    max-height:100px; 
    background:white;
    overflow-y:scroll;
}

Answer 2

我已经弄明白你的意思了。如果你想拥有一个静态页面（没有输入和东西），更简单的方法是使用普通的javascript。使用innerHtml和css，您可以将所有内容放入div中，并根据弹出窗口是否打开为其提供2个不同的ID，并且1 id使css不显示任何内容。对于打开弹出窗口的状态，请使用z-index和y-overflow。

如果我有机会，我会稍后编辑并发布一个例子。

在显示弹出窗口后处于相同的滚动位置

2 个答案: