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

【问题标题】：How to scroll to an element within a modal using jquery?如何使用 jquery 滚动到模式中的元素？
【发布时间】：2013-04-10 23:22:52
【问题描述】：

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

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

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

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

谢谢

【问题讨论】：

标签： javascript jquery html scroll modal-dialog

【解决方案1】：

看起来您正在对 html 和 body 调用 animate 方法。

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

如果你想滚动模态窗口，你必须调用那个元素的 animate 方法。

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

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

编辑：

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

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

【讨论】：

感谢您的信息。我弄乱了我发布的代码的剪切和粘贴。我纠正了它。我还使用了#Modal Header 标签而不是模态正文标签。我昨晚一定很累。
正确答案。应该接受。谢了，兄弟！ :)

【解决方案2】：

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

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

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

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

希望有帮助！

【讨论】：

【解决方案3】：

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

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

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

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

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

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

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

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

【讨论】：