模式窗口Bootstrap滚动到底部

Question

我有一个具有动态高度（大于屏幕高度）的模式窗口 Bootstrap。如何以编程方式将窗口滚动到底部？我尝试这样做：

$('#modal').animate({ scrollTop: $('#modal').height() }, 500);

但是当我调整窗口大小时，变量 $('#modal').height() 没有改变。 有什么想法吗？

Answer 1

解决方案非常简单：

$('#modal').animate({ scrollTop: $('#modal .modal-dialog').height() }, 500);

Answer 2

另一个解决方案对我不起作用，但它很接近。

这对我有用：

$('#modal').animate({ scrollTop: $('#modal .modal-content').height() }, 'slow');

Answer 3

这是对工作答案的修改，这将滚动到模式的底部。另一种选择没有到达底部而是停在中间。

    $("#modal .modal-body").animate({ scrollTop: $('#modal .modal-body').prop("scrollHeight")}, 'slow');

记住将“#modal”替换为您自己的模态名称。

您可能还想确保它在打开模式时正常工作

   <script>
      $('#modal').on('shown.bs.modal', function () {
      $("#modal .modal-body").animate({ scrollTop: $('#modal .modal-body').prop("scrollHeight")}, 'slow');
    });
    </script>

Answer 4

对于 Bootstrap 模式窗口滚动到底部， 这对我有用：

$('#modal .modal-body').animate({ scrollTop: $('#modal .modal-body').offset().top }, 'slow');

Answer 5

使用新的 Bootstrap V5.x，您现在可以使用：

jQuery('#modal').animate({ scrollTop: jQuery('#modal.modal-content').height() }, 'slow');

Answer 6

这些都不适合我，也许是因为 bootstrap 5。这有效：

var h = $('#modal_name .modal-body').height();
$("#modal_name .modal-body").scrollTop(h);