Html 显示模式窗口会导致意外问题_Html_Css

Html 显示模式窗口会导致意外问题

html css

Html 显示模式窗口会导致意外问题,html,css,Html,Css,我有以下css： html, body {background:#ebeced;min-height:100%;font-family:Helvetica} body {overflow-y:scroll; cursor:default;} 当我打开一个模式窗口时，我将.fixed类动态地添加到主体，这样就不能进行滚动了 .fixed #container-wrapper {position:fixed;left:0;width:100%;} 我也有一个固定的导航栏，然后内容。内容位于容器包

我有以下css：

html, body {background:#ebeced;min-height:100%;font-family:Helvetica}
body {overflow-y:scroll; cursor:default;}

当我打开一个模式窗口时，我将

.fixed

类动态地添加到

主体

，这样就不能进行滚动了

.fixed #container-wrapper {position:fixed;left:0;width:100%;}

我也有一个固定的导航栏，然后内容。内容位于

容器包装内

：

<body>
  <nav></nav>

  <div id="container-wrapper">
    <!-- all website content -->
  </div>
</body>

问题

如果我向下滚动内容，然后打开模式，内容会跳回顶部。我原以为这可能是event.preventDefault的问题，但现在我知道这与此无关。它连接到导致问题的

.fixed

类的添加

JSFIDDLE

-向下滚动至该按钮，然后单击该按钮。这将添加一个.fixed类，内容将“重置”到顶部。如何停止此“重置”效果？

您可以通过使

正文

并在希望继续滚动时将其删除来停止滚动，而不是使

容器包装器

固定

小提琴：

演示：

从我的jQuery弹出项目：

这段代码考虑了页面大小、宽度、高度、滚动条和页面跳转问题

使用上述代码解决的可能问题：

宽度，当设置位置固定时，html元素宽度可以小于100%
高度，同上
scrollbar，当设置position fixed时，页面内容不再有滚动条，即使在导致水平页面跳转之前有滚动条
pagejump，当设置position fixed时，页面滚动顶部不再有效，导致垂直页面跳转

如果有人对上面的页面冻结/解冻代码有任何改进，请告诉我，以便我可以将这些改进添加到我的项目中

编辑：

刚刚在一些随机页面上测试了上述代码，发现一些网站由于使用正文或html作为主要滚动内容而存在一些问题，我在上述代码中解决了这些问题，并将它们推送到github项目。

请提供更多代码/演示来帮助解决这些问题。我们这里没有反映模式的代码。如果有帮助的话，为模式添加了css。设置一个演示，或者不要期望太多帮助：这个问题听起来很具体。对不起-离开了计算机。使用jQuery添加了一个小提琴（不是角度）但是效果是一样的。Remove#Fiddle中的内容高度为true，但我避免使用css以外的任何东西来解决这个问题，因为上面的标记中没有列出javascript/jquery。添加类本身已经需要js，JSFIDLE链接中发布的示例代码使用jquery，这就是为什么我发布了一个更改页面冻结/解冻上的CSS值。我理解，但我只是遵循他们使用的标记和他们提供的JSFIDLE。我希望你的回答能为这个人提供他们所需要的一切

.fixed {
    overflow: hidden;
}

//Freeze page content scrolling
function freeze() {
        if($("html").css("position") != "fixed") {
            var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
            if(window.innerWidth > $("html").width()) {
                $("html").css("overflow-y", "scroll");
            }
            $("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
        }
}
//Unfreeze page content scrolling
function unfreeze() {
        if($("html").css("position") == "fixed") {
            $("html").css("position", "static");
            $("html, body").scrollTop(-parseInt($("html").css("top")));
            $("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
        }
}