maxim1978,
вариант ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
html,
body,
#scroll,
section {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#scroll {
display: flex;
align-items: center;
justify-content: center;
}
#circle {
stroke: #000;
stroke-width: 2;
fill: none;
}
#res {
position: fixed;
top: 20px;
right: 20px;
}
#crs {
transition: 1.2s linear;
}
#crs.rotate{
transform: rotate(360deg);
}
</style>
</head>
<body>
<section></section>
<div id="scroll">
<svg id="svg" viewBox="-250 -250 500 500" xmlns="http://www.w3.org/2000/svg" width="400">
<circle r="200" id="circle" />
<g id="crs">
<circle r="50" cx="-200" fill="red" />
<circle r="50" cx="200" fill="green" />
<circle r="50" cy="-200" fill="blue" />
<circle r="50" cy="200" fill="yellow" />
</g>
</svg>
</div>
<section></section>
<script>
let div = document.querySelector("#scroll");
let body = document.querySelector("body");
document.addEventListener("scroll", function(e) {
let {top} = div.getBoundingClientRect(),
center = top < 10;
if(center) {
div.scrollIntoView();
body.style.overflow = "hidden";
crs.classList.add("rotate");
}
})
</script>
</body>
</html>