模态打开时防止身体滚动并跳到顶部

Question

我一直在尝试很多解决方案，但我似乎无法做到这一点。

我找到了一个解决方案，可以防止身体在模态打开时滚动：

body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}  

这很好用。问题是，当我打开模态时，身体会滚动到顶部。我不希望这种行为，我理解它与位置有关：修复。我试过亲戚，但没办法。

提前致谢。

Answer 1

如果我理解你，你可以用Bootstrap做这样的事情：

// Avoid scrolling
body.modal-open, .modal-open .modal {
  overflow: hidden;
}

然后将.modal-dialog-centered添加到.modal-dialog以垂直居中模态。

https://jsfiddle.net/4938ek6q/

请在上面链接的示例中播放调整结果窗口的大小，以检查这是否是您要查找的内容。

希望这个帮助或至少指向正确的方向:)

Answer 2

我最终搞清楚了。我做的是删除我在问题上发布的css，然后下面的jquery在html元素中添加一个类，并在css样式化该类：

JQUERY：

$(".modal").on('show.bs.modal', function(event) {

    $('html').addClass('no-scroll');

})
$(".modal").on('hide.bs.modal', function(event) {

    $('html').removeClass('no-scroll');

})

CSS：

.no-scroll{
    overflow: hidden;
}