Question

我有以下css：

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

当我打开模态窗口时，我会动态地将.fixed类添加到body，以便无法进行滚动。

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

我还有一个固定的导航栏，然后是内容。内容位于container-wrapper：

内

<body>
  <nav></nav>

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

问题

如果我完全向下滚动内容然后打开模态，内容会立即跳回到顶部。我认为这可能是event.preventDefault的一个问题，但我现在知道这与此无关。它与添加导致问题的.fixed类相关联。

的jsfiddle

https://jsfiddle.net/w9w9hthy/1/ - 向下滚动按钮，然后点击按钮。这将添加.fixed类，内容将“重置”到顶部。如何停止这种“重置”效果？

Answer 1

而不是制作container-wrapper fixed，您可以通过制作body overflow: hidden来停止滚动，并在需要滚动时将其删除。

小提琴：https://jsfiddle.net/w9w9hthy/2/

.fixed {
    overflow: hidden;
}

Answer 2

演示：https://jsfiddle.net/w9w9hthy/5/

来自我的jQuery弹出项目：https://github.com/seahorsepip/jPopup

//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": ""});
        }
}

此代码考虑了宽度，高度，滚动条和pagejump问题。

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

宽度，当设置位置固定时，html元素宽度可以小于100％
身高，与上述相同
滚动条，当设置位置固定时，页面内容不再有滚动条，即使它有一个滚动条也导致水平的pagejump
pagejump，当设置位置固定时，页面scrollTop不再有效导致垂直pagejump

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

编辑：

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

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

2 个答案: