если честно запутался с этими лэйаутами окончательно
"editor.snippetTabstopHighlightBackground": "#ffffff00",
function getAngleBetween(newPoint, oldPoint) {
const dy = (newPoint.y - oldPoint.y);
const dx = (newPoint.x - oldPoint.x);
const theta = Math.atan2(dy, dx);
const angle = (((theta * 180) / Math.PI)) % 360;
return (angle < 0) ? 360 + angle : angle
}
const percent = clamp((scrollTop + halfWindowHeight - stepsOffset) / stepsHeight, 0, 1);
const prevArrowPoint = svgPathActive.getPointAtLength(pathLength * (percent - .001));
const currentArrowPoint = svgPathActive.getPointAtLength(pathLength * (percent));
const angle = getAngleBetween(prevArrowPoint, currentArrowPoint) + 180;
stepsArrow.setAttribute('transform', `translate(${prevArrowPoint.x - 6} ${prevArrowPoint.y - 11}) rotate(${angle}, 6, 11) `);
По описанию вы элементы не добавляете, а очищаете контейнер и добавляете новые элементы в количестве на один большее, чем было...