Prevent Chrome from moving from the DOM element when displaying a text search result

Question

If the element is overflow:hidden , and we use the text search function in the browser to find the text inside this element, but it is not displayed, Chrome will move this element so that the search result is visible to the user.

You can see it here: http://codepen.io/anon/pen/qdayVz Open the link in Chrome and find the text that is not visible, for example, “CCC”, and you will see that Chrome will move the element to display the text found .

Here is an example of the real world: http://www.jssor.com/demos/full-width-slider.html - Search for text that is not on the visible slide.

This does not happen in Firefox.

Answer 1

I was able to prevent this behavior using JavaScript.

When Chrome moves the #wide-child div to display the search text, what it actually does is scroll #parent content to scroll the search text in the view. This raises the scroll event, as you would expect, which you can listen to. When the scroll event is fired, then it is possible to reset the scroll value of the item no matter what it should be (possibly 0 ).

Example:

 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>