如何使用jquery滚动到模式中的元素？

Question

我有一个打开的模态，我逐行插入元素。每行都有自己的ID标签。目前，当列表比模态窗口大时，文本才会隐藏在模态窗口的底部。您可以手动使用滚动条，但我希望文本在打印时在模态窗口中向上滚动。

我玩过以下代码，但只是滚动模式后面的网页。我也尝试用模态元素替换'html，body'无济于事。

$('html, body').animate({ scrollTop: $('#Element').offset().top }, 500);

我确定我关闭了。有什么建议吗？

感谢

Answer 1

看起来你正在调用html和body上的animate方法。

$('html, body').animate(...);

如果要滚动模态窗口，则必须在该元素上调用animate方法。

$('#modal').animate(...);

其中#modal是包含您已创建的元素的元素。

编辑：

我看到你试图在模态上调用动画。 Here是一个小提琴，当您单击按钮时，它会在模态中滚动元素。

在#Element之后的代码中你有一个结束括号导致脚本错误：...scrollTop: $('#Element'])...

Answer 2

如果要查看隐藏的内容，可以向DIV添加CSS样式以处理溢出。一旦内容超出DIV的视图区域，这将自动为您创建垂直滚动条。

$("#someDivID").css("overflow","auto");

可以在以下网址引用所有属性。

http://www.w3schools.com/cssref/pr_pos_overflow.asp

希望有所帮助！

Answer 3

如果要将其与Bootstrap Modal一起使用，请务必使用

DialogResult

因为具有滚动条的是模态内容。

在要显示的内容之后使用占位符也可能很有用。考虑一下：您有一个模式，最后有一个按钮，例如在您的模态内提交表格。提交完成后，您可能希望在模式中显示确认或错误。由于您不希望将要显示的消息放置在表单中，因此您可能希望将其放置在按钮下方。但是，如果您的模式已经具有滚动条，则在显示消息时它不会自动滚动，例如带有Bootstrap警报。这是因为上述解决方案引用了消息的顶部。要解决此问题，您可以向位置添加偏移量，例如

$("#modalcontent").animate(...);

或者您可以在警报下方添加一个占位符。

$("#modalcontent").animate({scrollTop: $('#messagebox').offset().top + offset}, 200);

有时将这两个选项结合起来比较合适，例如当表单中还有其他警报时，显示提交消息时这些警报仍然可见。