如果一个元素是 overflow:hidden
并且我们使用浏览器的文本搜索功能来查找该元素内的文本,但它是不可见的,Chrome 将移动该元素以便搜索结果对用户可见。
您可以在这里看到这种情况:http://codepen.io/anon/pen/qdayVz 在 Chrome 中打开链接并搜索不可见的文本,例如“CCC”,您将看到 Chrome 将移动该元素以显示找到的文本。
这是一个真实世界的例子:http://www.jssor.com/demos/full-width-slider.html -- 搜索不在可见幻灯片中的文本。
这在 Firefox 中不会发生。
最佳答案
我能够使用 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>
关于html - 防止 Chrome 在显示文本搜索结果时移动 DOM 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30399351/