如何使用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是包含您创建的元素的元素。

编辑：

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

同样在代码中， ...scrollTop: $('#Element'])...后面有一个#Element括号，这会导致脚本出错： ...scrollTop: $('#Element'])...

Answer 2

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

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

所有属性都可以在下面的 URL 中引用。

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

希望有帮助！

Answer 3

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

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

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

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

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

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

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

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