focus() per immettere senza scorrere

Question

Ho un testo di input di ricerca che mi piacerebbe applicare un focus() durante il caricamento della pagina, il problema è che la funzione focus esegue automaticamente uno scorrimento verso questo campo. Qualche soluzione per disabilitare questo scroll?

<input id="search_terms" type="text" /> 
<script> 
    document.getelementbyId('search-terms').focus(); 
</script> 

Answer 1

Ecco una soluzione completa:

var cursorFocus = function(elem) { 
    var x = window.scrollX, y = window.scrollY; 
    elem.focus(); 
    window.scrollTo(x, y); 
} 

cursorFocus(document.getElementById('search-terms')); 

Answer 2

Se si utilizza jQuery, si può anche fare questo:

$.fn.focusWithoutScrolling = function(){ 
    var x = window.scrollX, y = window.scrollY; 
    this.focus(); 
    window.scrollTo(x, y); 
}; 

e poi

$('#search_terms').focusWithoutScrolling(); 

Answer 3

Un po 'modificato versione che supporta più browser (incluso IE9)

var cursorFocus = function(elem) { 
    var x, y; 
    // More sources for scroll x, y offset. 
    if (typeof(window.pageXOffset) !== 'undefined') { 
     x = window.pageXOffset; 
     y = window.pageYOffset; 
    } else if (typeof(window.scrollX) !== 'undefined') { 
     x = window.scrollX; 
     y = window.scrollY; 
    } else if (document.documentElement && typeof(document.documentElement.scrollLeft) !== 'undefined') { 
     x = document.documentElement.scrollLeft; 
     y = document.documentElement.scrollTop; 
    } else { 
     x = document.body.scrollLeft; 
     y = document.body.scrollTop; 
    } 

    elem.focus(); 

    if (typeof x !== 'undefined') { 
     // In some cases IE9 does not seem to catch instant scrollTo request. 
     setTimeout(function() { window.scrollTo(x, y); }, 100); 
    } 
} 

Answer 4

Ad oggi, il metodo preferito per impostare la messa a fuoco su un elemento al caricamento della pagina utilizza l'attributo autofocus. Questo non comporta alcun scorrimento.

<input id="search_terms" type="text" autofocus />

Il autofocus attrubute is part of the HTML5 standard ed è supportato da tutti i principali browser, con la sola eccezione di Internet Explorer 9 o versioni precedenti.

Answer 5

Le risposte qui non si occupano di scorrere l'intera gerarchia, ma solo le barre di scorrimento principali. Questa risposta si prenderà cura di tutto:

var focusWithoutScrolling = function (el) { 
     var scrollHierarchy = []; 

     var parent = el.parentNode; 
     while (parent) { 
      scrollHierarchy.push([parent, parent.scrollLeft, parent.scrollTop]); 
      parent = parent.parentNode; 
     } 

     el.focus(); 

     scrollHierarchy.forEach(function (item) { 
      var el = item[0]; 

      // Check first to avoid triggering unnecessary `scroll` events 

      if (el.scrollLeft != item[1]) 
       el.scrollLeft = item[1]; 

      if (el.scrollTop != item[2]) 
       el.scrollTop = item[2]; 
     }); 
    }; 

Answer 6

C'è una nuova WHATWG standard che consente di passare un oggetto a focus() che specifica che si vuole evitare che il browser di scorrere l'elemento nella vista:

const element = document.getElementById('search-terms') 

element.focus({ 
    preventScroll: true 
}); 

Attualmente è supportato in Chrome 64 e Edge Insider Preview build 17046.