在页面上查找的功能搜索栏

Question

所以，我有一个网页可以显示文件夹中的文件。

随着越来越多的文件被创建，表格将会增长，我希望搜索栏具有功能，并且以某种方式突出显示或移动页面以在中心显示搜索的词。例如，如果有人键入“Janet”，它会将他们带到“Janet”。就像网页上的 control+f 一样。我在这个网站上看了很多，但没有找到与答案类似的问题。如果它是重复的，请告诉我，谢谢！

Answer 1

假设您的搜索函数返回适合您搜索的 html 元素数组，您可以访问数组中的第一个元素并找到它在 DOM 中的位置。

使用element.getBoundingClientRect() 找到它相对于窗口的位置。添加 window.scrollX 和/或 window.scrollY 使其相对于 DOM 的位置。

然后，您可以使用 window.scrollTo(x, y) 将用户滚动到该位置。

将它与当您希望滚动发生时执行的函数联系起来是有意义的，可能在用户按下回车键之后（而不是在每个字符输入之后）。