This code can cause scroll jank (stuttering during scrolling) because: 1) It runs on every scroll event without throttling or debouncing, 2) Performs style updates that can overwhelm the browser's ability to maintain 60fps, 3) May cause unnecessary style recalculations, 4) Doesn't use requestAnimationFrame for visual updates. To optimize:
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
const scrollTop = document.documentElement.scrollTop;
elements.forEach(el => {
el.style.transform = `translateY(${scrollTop * 0.5}px)`;
});
ticking = false;
});
ticking = true;
}
});