javascript - 如何制作Facebook剧院 View

Question

当你在 facebook 上点击照片时，它会弹出，看起来可以用灯箱或类似的东西来完成，看看地址栏，url 已更改，可以用 pushState javascript 方法来完成

但是你看浏览器的垂直滚动条了吗？这就像在页面没有溢出时打开新页面我确定它没有使用

body{
        overflow:hidden
} 

因为当您打开开发者工具(在 Chrome 中)时滚动条处于事件状态

它就像一个全新的页面，我希望你能理解我的问题，抱歉英语不好

Answer 1

当图片在灯箱式查看器中打开时，您是正确的，因为 URL 是通过 pushState 更改的。

通过一个简单的技巧使滚动条处于非事件状态，其中整个页面的内容(相册、提要或您之前所在的任何页面)都被分配了 _31e 类(这似乎是动态生成的，所以它并不总是被命名为这个)。

_31e 将以下 CSS 样式分配给容器:

position: fixed;
top: 0px;

您会看到它应用于开始 body 标记之后的第二个 div。