Javascript-форум - Как сделать задержку скрола ?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как сделать задержку скрола ? (https://javascript.ru/forum/dom-window/81637-kak-sdelat-zaderzhku-skrola.html)

Как сделать задержку скрола ?

Я нарисовал SVG и повесил событие wheel на него

Теперь не могу добиться того что бы при попадании этого SVG в центр экрана временно пропала прокрутка по оси Y ...

Этот вопрос задал на stackoverflow: https://ru.stackoverflow.com/q/1226349/308951

Как это делается правильно ?

Моя попытка это решить (провальная): https://codepen.io/topicstarter/pen/wvzmvwK

svg rotate center

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>

спасибо огромное