En mi página web, usando JavaScript, primero me gustaría desplazar el div y luego resaltar un objeto en el div.
Este es el código que estoy usando y funciona completamente, sin embargo, me gustaría evitar el tiempo de espera.
let commentDiv = document.getElementById('commentsDiv'); commentDiv.scrollTop = scrollValue; setTimeout(function(){decorateMarker(markerObj);}, 500);Cambié mi código para usar promesa, pero no funciona. decorarMarker(markerObj) se ejecuta, pero el objeto de comentario no se resalta a menos que agregue setTimeout alrededor.
let myPromise = new Promise(function(myResolve, myReject) { commentDiv.scrollTo(0,scrollValue); myResolve(markerObj); }); myPromise.then( function(markerObj) { //highlight comment decorateMarker(markerObj); } )¿Alguna sugerencia sobre cómo garantizar que el desplazamiento esté completamente terminado antes de que se ejecute el código resaltado?
Una forma de lograr esto es adjuntar un detector de desplazamiento cuando se llama a scrollTo. Luego, elimine el oyente una vez que haya alcanzado la ubicación deseada. De esta manera, puede asegurarse de que el resaltado se produzca solo cuando se alcance la posición de desplazamiento deseada.
He creado una implementación muy simple de esto como ejemplo:
let button = document.getElementById("scrollToElem"); button.addEventListener('click', () => { window.scrollTo({top: 2000, behavior: "smooth"}); scrollHandler = () => { if(this.scrollY === 2000){ console.log('remove scroll listener'); document.removeEventListener('scroll', scrollHandler, true); //Now do your highlight. } } document.addEventListener('scroll', scrollHandler, true); });