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

编辑：

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

同样在代码中，您有一个右括号，之后#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 模态一起使用，请务必使用

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

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

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

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

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

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

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