Bootstrap模态窗口向底部滚动

Question

我有一个使用Bootstrap的模态窗口，它的高度是动态的（超过屏幕高度）。我如何以编程方式将窗口滚动到底部？我尝试过这样做：

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

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

- makandroid

---

请尝试在滚动模态框时将overflow: hidden;添加到body。 - Nadezhda Serafimova

感谢您的评论。我已解决了这个问题。 - makandroid

Answer 1

解决方案非常简单：

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

- makandroid

Answer 2

另一个解决方案对我没有用，但它很接近。 以下是适用于我的解决方案：

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

- chandler

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>

- Vee Joe

---

如果模态框包含 .modal-dialog-scrollable 类，则它可以正常工作。 - user17799143

Answer 4

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

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

- Doc Hojo

Answer 5

关于将Bootstrap模态窗口滚动到底部，以下是我使用的方法：

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

- Azhar