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

Question

Есть некий SVG и в тот момент когда этот SVG в центре экрана то полоса прокрутки по оси Y должна пропасть на некоторое время ...

Пытался вычислить через условия - отнять половину высоты экрана и половину высоты блока но это не работает ...

где я ошибся ?

Моя попытка

let doc = document.querySelector("html,body");

document.querySelector("#scroll").addEventListener("wheel", function(e) {
  let coord = e.deltaY + "deg";
  crs.style.transform = `rotate(${coord})`;

})

document.querySelector("#scroll").addEventListener("mousemove", function(e) {
  if (doc.clientHeight == doc.clientHeight / 2 && scroll.clientHeight == scroll.clientHeight / 2) {
    doc.style.overflow = "hidden"
  }
})

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: 1s linear;
}

<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>

Answer 1

Такой себе вариант, ещё и на JQ

let doc = document.querySelector("html,body");

document.querySelector("#scroll").addEventListener("wheel", function(e) {
  let coord = e.deltaY + "deg";
  crs.style.transform = `rotate(${coord})`;

})

let one = false, timer = false, overflow = $('body').css('overflow');

$(window).on('scroll', function(){
  let vH = $(window).height() / 2, y = $('#scroll');
  y = y.offset().top - (y.height() / 2);
  if(($(window).scrollTop() - vH) > y && timer === false && one === false) {
    $('body').css('overflow', 'hidden');
    timer = setTimeout(function (){
      timer = false;
      $('body').css('overflow', overflow);
      one = true;
    }, 5000);
  }
});

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: 1s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

БЛОГ НА HUSL

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

Ответы (1 шт):