Estoy tratando de agregar un elemento SVG al lado de las etiquetas de formulario con posición absoluta. Cuando hay un desplazamiento, escucho el evento de desplazamiento y actualizo la posición del SVG. Cuando se habilita el desplazamiento suave, el SVG tiende a rebotar sobre el desplazamiento continuo. Este rebote se observa en macOS Chrome y en FireFox cuando el desplazamiento suave está habilitado.
En Linux/Windows, esto se puede reproducir utilizando la extensión de cromo de desplazamiento suave .
Capturé el rebote debido al desplazamiento en esta grabación.
rebote debido al desplazamiento
function updateCoords(smartTip, refElement) { let clientRect = refElement.getBoundingClientRect(); smartTip.top = clientRect.top; smartTip.left = clientRect.left; let element = smartTip.element; let position = getRightPosition(refElement); let top = position[0]; let left = position[1]; let diffX = left - smartTip.prevLeft + "px"; let diffY = top - smartTip.prevTop + "px"; element.style.transform = "translate(" + diffX + "," + diffY + ")"; } function setOnScrollListener(element) { let scrollHandler = function (e) { let inputElements = document.getElementsByTagName("label"); for (let i = 0; i < customElements.length; i++) { customElements[i].element.style.display = "inline"; updateCoords(customElements[i], inputElements[i]); } }; element.addEventListener("scroll", scrollHandler, true); }