preventing browser search ctrl f from scrolling my collapsed div

Question

I have a panel that is "collapsed" by setting the wrapper div's width to be a lot smaller than the width of the content. However, when I use ctrl f to search for words, my collapsed panel gets scrolled, ie. the scrollLeft attribute of the wrapper div of the collapsed panel is no longer 0. This is a problem because I don't want it to be scrolled as it messes up the UI.

Is there a way to prevent search from automatically scrolling stuff in my collapsed panel? Some sort of event I can latch on to (focus?) so that I can reset scrollLeft to 0 whenever the browser's search is activating, or CSS I can set?

I am not using jQuery so anything jQuery related is not an option.

Answer 1

This is default functionality of any browser and functionality that users expect, removing this or preventing it would give developers the ability to seriously alter user experience and is generally not possible, nor a good idea.

That being said, the first suggestions I have are the following

1) set the CSS display of the object or its contents to None after fully collapsed.
2) remove the content when collapsed and store it in memory to inject back in upon opening of collapsed content.
3) upon the open of a collapsed element, set the scrollLeft to 0.

Answer 2

Have you tried overflow:hidden on the div?