¡Saludos!
Estoy trabajando en la modificación de un código de una aplicación para diseñar fundas para teléfonos. Necesito detectar cuando un menú aparece en la pantalla y poder tomar acciones sobre él.
El panel que necesito ubicar se ve de esta forma en el HTML antes de aparecer (aparece haciendo clic sobre el elemento de texto agregado en el canvas).
Una vez que se hace clic sobre el texto aparece el panel de opciones, se activan los elementos y al div padre se le agrega la clase .fpd-show.
Ahora bien, quiero detectar la aparición del panel para desplazarlo hacia la derecha y luego hacia la izquierda de nuevo, para que los usuarios se den cuenta de que hay más opciones (se trata de la vista para móviles) y que esto ocurra una sola vez.
He intentado con lo siguiente:
let elementoScrollHorizontal = document.getElementsByClassName('fpd-scroll-area');
elementoScrollHorizontal.addEventListener('show', () => {
// Aquí el código para mover el scroll
})
Pero no funciona y asumo que es porque al momento de cargar la página el elemento que tiene la clase .fpd-scroll-área aún no es visible y me arroja el error de que el Listener no es una función porque elementoScrollHorizontal regresa null. Y sé que probablemente el evento 'show' no sea el adecuado, pero es que ni se llega a ejecutar esa línea porque, como dije, la variable que almacena el objeto regresa null.
En el pasado resolví esto con un método setTimeout, agregango unos elementos adicionales al código de la página y algo de jquery (como en el código) pero, además de que quiero hacerlo con JS puro, esa manera en la que lo hice no es práctica porque se basa en un tiempo fijo que puede variar según la rapidez del dispositivo que el usuario utilice.
jQuery(document).ready(function(){
jQuery('body').on('click', '#cdm-aux-1', function(){
setTimeout(function(){
jQuery('#cdm-aux-0').animate({scrollLeft: '190' }, 1000);
jQuery('#cdm-aux-0').animate({scrollLeft: '0' }, 1000);
}, 1900);
});
});
Gracias de antemano por el apoyo.
getElementsByClassName
retorna un arreglo de objetos, no solo unoelementoScrollHorizontal[19].addEventListener('click', () => { alert('Hola mundo'); })
Ya que el elemento que quiero seleccionar es el de indice 19 del arreglo.getElementById
<script>
al final delbody
id
al elemento y el<script>
al final delbody
y sigo recibiendo null.let elementoScrollHorizontal = document.getElementById('temporal'); console.log(elementoScrollHorizontal); // Esto me devuelve null en la consola. Si lo ingreso manualmente luego de cargar la página, si me devuelve el elemento. elementoScrollHorizontal.addEventListener('mouseover', () => { jQuery(elementoScrollHorizontal).animate({scrollLeft: '1000' }, 1000); jQuery(elementoScrollHorizontal).animate({scrollLeft: '0' }, 1000); })