Html 显示文本搜索结果时防止Chrome移动DOM元素

如果一个元素是溢出：隐藏的，我们使用浏览器的文本搜索功能来查找该元素中的文本，但它不可见，Chrome将移动该元素，以便用户可以看到搜索结果

你可以在这里看到这种情况： 在Chrome中打开链接并搜索不在可见的文本，例如“CCC”，您将看到Chrome将移动元素以显示找到的文本

下面是一个真实的例子：--搜索不在可见幻灯片中的文本

---

这在Firefox中不会发生。

我使用JavaScript能够阻止这种行为

当Chrome移动

#wide child

div以显示搜索文本时，它实际上是在滚动

#parent

的内容以将搜索文本滚动到视图中。这将触发预期的

滚动
事件，可以监听该事件。当scroll事件触发时，可以将元素的scroll值重置为应该的值（可能是
0
）

例如：


document.getElementById（'parent'）.addEventListener（'scroll'，函数（e）{
document.getElementById（'parent'）。scrollLeft=0；
log（“阻止滚动”）；
});
#父级{
宽度：30px；
溢出：隐藏；
}
#宽孩子{
宽度：500px；
}

AAAAAAAA
bbbbbbbb
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
dddddd
依依
坦白地说，我觉得Chrome做得不错。它向你展示了你在搜索中想要的东西。改变这种行为不太可能用CSS“修复”。相关：我同意-这听起来像是Chrome做的。我假设问题是，你不希望Chrome通过给用户一种查看方式来隐藏其他内容。为什么不确保所有东西都能放进你的盒子里呢？如果你看不到它在哪里，浏览器告诉你它找到了匹配的东西有什么用？Chrome做对了。您是否需要一个脚本来在Firefox中修复此问题，并将其也安装到Firefox中？：）