如何判斷一個對象何時到達JavaScript中可見窗口的末尾？

我正在製作一款遊戲。我有一個15000x15000像素的舞臺。顯然，現有的屏幕沒有那麼多的像素，所以我讓用戶使用箭頭鍵滾動來改變窗口。我希望能夠檢測到我的對象this.localTank到達可視窗口的邊緣，以便隨後可以根據需要滾動窗口。我怎樣才能做到這一點？如何判斷一個對象何時到達JavaScript中可見窗口的末尾？

來源

2017-05-25 Dev Singh

你知道的位置和你的坦克的尺寸和屏幕：'screen.newX = Math.max（Math.min （screen.x，tank.x），tank.x + tank.width - screen.width）;'假設你的坦克和屏幕的註冊點被留下。 – Thomas

請給我們提供一些你已經寫過的代碼。 –

可以使用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>

來源

2017-05-25 23:36:00 guest271314

如何判斷一個對象何時到達JavaScript中可見窗口的末尾？

回答

相關問題