如果一个元素是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>