logo标签列表

固定叠加层允许滚动页面。将body的overflow设置为hidden会跳转到顶部。

jqueryhtmlcss
3
在我的网站项目中，我有一组块，表示项目缩略图。当我点击缩略图时，详细视图会出现。这个视图是一个固定位置、z-index比其他任何东西都大的div，覆盖整个页面。我可以滚动详细信息（这当然是我想要的），但有时它也会滚动页面主体。我已经测试了几种解决方案，但没有一个完全帮助我解决问题。如果我将主体设置为overflow:hidden，则可以防止滚动，但另一方面，视图会跳到顶部。另一个解决方案：将主体设置为固定位置，并将顶部属性设置为窗口offsetY的相反数，然后在关闭详细信息时设置window.scrollTo(offsetY)，但这个解决方案也无效（详细信息位于顶部，我无法滚动）。因此问题是，如何防止在固定的覆盖元素中滚动页面主体？
1个回答
1
如果您打开详细视图，则应将其添加到body类中。
.modal-open {
    overflow: hidden;
}

详细视图模态框应该有类。
.modal {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}
.modal-dialog {
    width: 600px;
    margin: 30px auto;
}

HTML结构
<body class="modal-open">
    ...
    <div class="modal">
        <div class="modal-dialog"></div>
    </div>
</body>
1
好的，感谢你的努力，但这会再次跳转到顶部:/ - Vít Horáček
你能举个例子吗？ 我的变量在Bootstrap中成功运行http://getbootstrap.com/javascript/#modals 你可能使用href="#"而没有用e.preventDefault()吗？ - sglazkov
好的，这是一个例子：http://mountiny.com/lab/blazek/ 问题在于设置body overflow hidden总是会跳到顶部。对于代码混乱我很抱歉。 - Vít Horáček
html { overflow-x: hidden; } 移除此内容 - sglazkov
哥们，谢谢你啊，省了我不少时间。我在改变一些概念时把它忘在那里了。找到自己的错误真的很难。所以再次感谢你 ;) - Vít Horáček
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接