Cuando un usuario abre mi sitio web, no quiero que el sitio se desplace automáticamente hacia abajo hasta la sección 'iniciar sesión'. Creo que Firebase se está desplazando hacia abajo a la sección cuando realizo:
var ui = new firebaseui.auth.AuthUI(firebase.auth()); ui.start("#firebaseui-auth-container", uiConfig);http://launchpad.behavioralsight.com/
¿Cómo puedo evitar que haga esto?
No parece que FirebaseUI se pueda configurar para evitar el desplazamiento. Hay un problema abierto de Github (y una pregunta relacionada con StackOverflow ).
El desplazamiento ocurre en setupFocus_() . Hay varias versiones según el tipo de widget, pero creo que está interesado en passwordsignup.js .
La solución es bastante simple: pase la opción preventScroll a cada llamada de focus() de esta manera:
this.getEmailElement().focus({preventScroll:true}); Si quiere ser elegante, puede hacer que esta sea una opción configurable del método AuthUI.start() como se sugiere en el problema de Github.
Si no desea modificar FirebaseUI, puede funcionar una solución alternativa basada en esta respuesta relacionada :
focusout como se describe en la respuesta anterior:Sin embargo, antes de eso, lo que sea que tenga el foco recibirá un evento de "enfoque de
"focusout"de tipoFocusEvent. Suponga que su variable de evento ese. La propiedade.relatedTargetse completará con el elemento que está a punto de recibir el foco. Si maneja el evento"focusout"a poner el foco en lo que está perdiendo el focoe.target, inmediatamente volverá a recibir el foco, junto con un evento"focus"y"focusin", mientras que el objeto que iba a recibir el foco no recibirá el foco ni ningún evento de foco.
focusout para que la sección de inicio de sesión se pueda enfocar después del enfoque automático inicial.Prueba esto. Está evitando que el campo incluso reciba el foco ya que no es visible en la pantalla. Luego, después de un segundo, muestre el formulario.
HTML
<style> .loading #ui-sign-in-email-input { display: none; } </style> <div id="firebaseui-auth-container" class="loading"></div> <div id="loader">Loading...</div>JavaScript
... uiShown: () => { setTimeout(() => { document.getElementById('firebaseui-auth-container').classList.remove('active'); }, 500); document.getElementById('loader').style.display = "none"; },...