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

Question

如果元素是overflow:hidden,我们使用浏览器的文本搜索功能来查找该元素中的文本,但它不可见,Chrome将移动该元素,以便搜索结果对用户可见.

您可以在此处看到这种情况:http://codepen.io/anon/pen/qdayVz 打开Chrome中的链接并搜索不可见的文本,例如"CCC",您将看到Chrome将移动显示已找到文本的元素.

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

这在Firefox中不会发生.

Answer 1

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

当 Chrome 移动#wide-childdiv 以显示搜索文本时，它实际上所做的是滚动内容以#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>