模态窗口Bootstrap滚动到底部

cbjzeqam  于 2023-01-28  发布在  Bootstrap
关注(0)|答案(5)|浏览(166)

我有一个动态高度(大于屏幕高度)的模态窗口Bootstrap。我如何通过编程方式将窗口滚动到底部?我试着这样做:

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

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

5us2dqdw

5us2dqdw1#

解决方案非常简单:

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

uinbv5nw2#

另一个解决方案对我不起作用,但它很接近。
以下是对我起作用的方法:

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

brtdzjyr3#

这是一个修改的工作答案,这将滚动到底部的模态。另一个选项没有得到底部,但停在中间。

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

请记住将“#modal”替换为您自己的modal名称。
您可能还希望确保在打开模态

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

ct2axkht4#

对于Bootstrap模态窗口滚动到底部,以下是对我有效的方法:

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

8ehkhllq5#

有了新的Bootstrap V5.x,您现在可以用途:

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

相关问题