固定叠加允许滚动体 . 设置隐藏到身体的溢出跳转到顶部-Java 学习之路

在我的Web项目中，我有一组块，代表项目缩略图 . 单击缩略图时，将显示详细视图 . 这个视图是整页的div并且位置固定，z-index比其他任何东西都大 . 我可以滚动细节（这当然是我想要的），但它有时滚动身体 . 我已经测试了一些我找到的解决方案，但是没有一个能够完全帮助我 . 如果我将body设置为隐藏溢出，则会阻止滚动，但另一方面，视图跳转到顶部 . 另一个解决方案：将body设置为固定位置，将top属性设置为window.offsetY的对面，然后当关闭详细设置window.scrollTo（offsetY）时，此解决方案也无法工作（详细信息位于顶部，我无法滚动） .

所以问题是，如何防止固定叠加元素中的滚动体？

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>

回复于 2024-04-27T19:40:55+08:00

固定叠加允许滚动体 . 设置隐藏到身体的溢出跳转到顶部

1 回答

相关问题