主页 / 问题 / 1226349
Accepted
Monkey Mutant
Asked:2022-01-02 10:25:14 +0000 UTC2022-01-02 10:25:14 +0000 UTC

如何正确设置条件？

  • 772

有一些 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>

javascript

1 个回答

  1. Best Answer

    这样的选择，也在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>

    • 2

相关问题