Impedisci a Chrome di spostare l'elemento DOM quando viene visualizzato il risultato di ricerca testo

Question

Se un elemento è overflow:hidden e utilizziamo la funzionalità di ricerca testo del browser per trovare il testo all'interno di quell'elemento, ma non è visibile, Chrome lo sposterà in modo che la ricerca il risultato sarà visibile all'utente.

È possibile vedere questo evento qui: http://codepen.io/anon/pen/qdayVz Aprire il collegamento in Chrome e cercare il testo che non è visibile in "CCC", ad esempio, e vedrai che Chrome sposterà l'elemento per mostrare il testo trovato .

Ecco un esempio del mondo reale: http://www.jssor.com/demos/full-width-slider.html - Cerca il testo che non si trova nella diapositiva visibile.

Questo non accade in Firefox.

Answer 1

Sono stato in grado di impedire questo comportamento utilizzando JavaScript.

Quando Chrome sposta il div #wide-child per mostrare il testo di ricerca, ciò che sta effettivamente facendo è scorrere i contenuti di #parent per scorrere il testo di ricerca in vista. Ciò innesca un evento scroll come previsto, che può essere ascoltato. Quando viene attivato l'evento di scorrimento, è quindi possibile ripristinare il valore di scorrimento dell'elemento su qualsiasi valore (probabilmente 0).

Esempio:

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>