javascript - Bootstrap 3 模态弹出窗口通过焦点放在顶部防止滚动

Question

我有几个 Bootstrap 模态，其长度大于我的屏幕。这意味着 Bootstrap 将自动聚焦于模式的底部。

显示模态后，我将焦点设置在 .modal-header 上，如下所示，以显示模型的顶部而不是底部。现在它会自动滚动到顶部，但是我怎样才能在不滚动的情况下做到这一点呢？

 $('.modal-header').focus();

Answer 1

您可以在没有焦点的情况下使用一些 css 脚本:

.modal .modal-body {
    max-height: 90vh; // the height you want (vh means viewport height)
    overflow-y: auto; // this will allow the middle area to scroll.
}

如果您仍然想要焦点，您可以使用此代码片段保存位置并在焦点后恢复位置:

var x = window.scrollX || window.pageXOffset || document.documentElement.scrollTop,
    y = window.scrollY || window.pageYOffset || document.documentElement.scrollLeft;
$('.modal-header').focus();
window.scrollTo(x, y);