如果我将身高应用到身体，页面会滚动到顶部

Question

我的问题是我在html页面上有一个按钮，当单击此按钮时会打开一个弹出框（覆盖背景），并停止后台滚动我正在应用此css：

windowHeight = $(window).height();
$("body").css({
    "height": windowHeight,
    "overflow": "hidden", 
    "overflow-y": "hidden"
});

一切都很完美，但页面滚动到顶部。我该如何防止这种情况？

Answer 1

这是因为您更改了height。您不需要设置height，因此body overflow: hidden就足够了。

CSS：

.locked {
  overflow-x: hidden; overflow-y: hidden;
}

使用Javascript：

$("body").addClass("locked");

试一试：http://jsbin.com/tapagexope/1/edit?html,css,js,output （点击正文）

在FF 34和Chrome 38中测试。

---

请注意，您应将叠加层放置在position: fixed且left, top, bottom, right全部为0的容器中，覆盖整个视口。在该框中，您可以将叠加元素居中。

Answer 2

我实际上已经编写了一个jQuery插件来解决这个确切的问题：jquery-disablescroll

使用插件脚本，当弹出窗口打开时调用：

$(window).disablescroll();

当弹出窗口关闭时，通过调用：

再次启用滚动

$(window).disablescroll("undo");

Here's the example.