Question

我正在开发一款游戏。我有一个15000x15000像素的竞技场。显然，没有现有的屏幕有那么多像素，所以我让用户使用箭头键滚动来更改窗口。我希望能够检测到我的对象this.localTank何时到达可视窗口的边缘，以便我可以根据需要滚动窗口。我怎样才能做到这一点？

Answer 1

您可以使用Element.getBoundingClientRect() .right属性window.innerWidth

body {
  width: 15000px;
}

#tank {
  display: block;
  position: relative;
  width: 50px;
  height: 50px;
  left: 0px;
}

<body>
  <div id="tank">tank</div>
  <script>
    var tank = document.getElementById("tank");

    function getTankPosition() {
      var left = window.getComputedStyle(tank).left;
      tank.style.left = parseInt(left) + 50 + "px";
      if (tank.getBoundingClientRect().right >= window.innerWidth) {
        // do stuff
        console.log(tank.getBoundingClientRect().right, window.innerWidth);
      }
    }
    
    tank.addEventListener("click", getTankPosition)
  </script>
</body>

如何判断对象何时到达JavaScript中可见窗口的末尾？

1 个答案: