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

【问题标题】：Prevent Chrome from moving DOM element when showing text search result防止 Chrome 在显示文本搜索结果时移动 DOM 元素
【发布时间】：2015-05-22 14:28:36
【问题描述】：

如果一个元素是overflow:hidden，并且我们使用浏览器的文本搜索功能来查找该元素内的文本，但它不可见，Chrome 将移动该元素，以便用户可以看到搜索结果。

您可以在这里看到这种情况：http://codepen.io/anon/pen/qdayVz 在 Chrome 中打开链接并搜索不可见的文本，例如“CCC”，您会看到 Chrome 会移动元素以显示找到的文本。

这是一个真实世界的示例：http://www.jssor.com/demos/full-width-slider.html -- 搜索不在可见幻灯片中的文本。

这在 Firefox 中不会发生。

【问题讨论】：

坦率地说，在我看来，Chrome 似乎做得对。它准确地向您展示了您在搜索中所要求的内容。使用 CSS 更改此行为不太可能“修复”。
相关：stackoverflow.com/questions/21093148/…
我同意 - 这听起来像是 Chrome 做到了。我假设问题是您不希望 Chrome 隐藏其他内容并为用户提供查看它的方式。为什么不只是确保所有东西都适合你的盒子呢？
如果您看不到它在哪里，浏览器告诉您它找到了匹配项有什么用？铬做对了。您是否需要一个脚本来在 Firefox 中解决这个问题并在那里得到它？ :)

标签： html css google-chrome

【解决方案1】：

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

当 Chrome 移动 #wide-child div 以显示搜索文本时，它实际上是在滚动 #parent 的内容以将搜索文本滚动到视图中。正如预期的那样，这会触发scroll 事件，可以监听该事件。当滚动事件触发时，可以将元素的滚动值重置为应有的值（可能是0）。

例子：

document.getElementById('parent').addEventListener('scroll', function(e){
  document.getElementById('parent').scrollLeft=0;
  console.log('Prevented scrolling');
});

#parent {
  width: 30px;
  overflow: hidden;
}

#wide-child {
  width: 500px;
}

<div id="parent">
  <div id="wide-child">
    AAAAAAA
    BBBBBBB
    CCCCCCC
    DDDDDDD
    EEEEEEE
  </div>
</div>

【讨论】：