Tengo el siguiente código:
// Utilizo esta variable para eliminar el evento porque .removeEventListener() no me funcionó.
let eliminarEvento = true;
let body = document.getElementsByTagName('body');
body[0].addEventListener('click', mover);
function mover(evento){
let canva = document.getElementsByClassName('upper-canvas ');
canva[0].id = 'canvas';
let scrollArea = document.getElementsByClassName('fpd-scroll-area');
scrollArea[19].id = 'scrollArea';
if(evento.target.id == "canvas"){
if (eliminarEvento){
jQuery('#scrollArea').animate({scrollLeft: '500' }, 1000);
jQuery('#scrollArea').animate({scrollLeft: '0' }, 1000);
}
eliminarEvento = false;
}
}
Basicamente lo que hace es capturar un evento click sobre un canvas, que despliega un panel de opciones que se desborda de la pantalla en dispositivos móviles, el cual se mueve a la derecha para que el usuario sepa que hay más opciones.
Hasta ahora funciona, pero la intención es que se ejecute solo la primera vez que el usuario entre a la página desde el mismo navegador. Hasta el momento, lo que puedo hacer es que se ejecuta una sola vez pero cuando el usuario refresque la página o vaya a editar otro porducto y vuelva a aparecer el panel, verá de nuevo el efecto.
He intentado hacerlo con LocalStorage pero no funciona solo con la función mover.
Un plus que me gustaría saber, si esta a su alcance, sería cómo hacer el movimiento suavizado del scroll horizontal del panel pero con JS puro.
Gracias de antemano.
localStorage.setItem("nombre-funcion", "nombre-guardado");
No sé si sea importante, pero el elemento que selecciono para mover es un panel que se genera de forma dinámica.