div溢出的jQuery偏移問題：滾動

Question

我正在編寫HTML5棋盤游戲，而jQuery的offset（）出現問題。 組成游戲板的DIV網格位於包裝器DIV中，該包裝器DIV具有CSS，該CSS設置了上溢：滾動/寬度和高度：100％。 游戲板本身較大，因此滾動條在水平和垂直方向上都可以相當大。

問題是，當我單擊DIV並嘗試將播放器移動到該棋子時，播放器會四處移動，並且相對於所單擊的棋子，它永遠不會處於一致的位置。

碼：

$(".boardGridPiece").click(function(){
    if(!$(this).hasClass("room") && $(this).hasClass("eligibleMove")){
        playerStartX = $(this).offset().left;
        playerStartY = ($(this).offset().top;
        player.css("left", playerStartX);
        player.css("top", playerStartY);
        determineEligibleMoves($(this).attr("id"));
    }
});

您會看到單擊一塊棋盤時，將抓住該棋盤的偏移量並將其設置為玩家的X和Y。

CSS：

#boardWrapper {
    position:relative;
    width:100%;
    height:80%;
    overflow: scroll;
}

#theGame {
    background-color: #fff;
    height: 1080px;
    width: 1920px;
}

根據玩家相對於當前滾動視圖的位置，當我單擊一塊木板時，他會以非常不一致的方式移動。 有時他離我點擊的位置最遠，或者最遠等等。

我究竟做錯了什么？ 如何考慮相對滾動位置以獲得一致的位置？

Answer 1

這是一個供您使用的木板作為示例。 另外，我在jquery中的刺也包括在內。 基本上，它會找到您單擊的位置，以浮點形式計算px距離，並為士兵設置動畫以使其滑到新位置：

 var black = '<td style="background-color:black"><div class="boardGridPiece"></div></td>'; var white = '<td style="background-color:white"><div class="boardGridPiece"></div></td>'; var squares = [black, white]; var grid = ""; for (var i = 0; i < 9; i++) { grid += "<tr>"; for (var j = 0; j < 16; j++) { grid += squares[(i + j) % 2]; } grid += "<\\tr>"; } $('#gameboard').append(grid); var gridSelected = $('#gameboard').find('tr:nth-child(2)').find('td:first').find('div'); gridSelected.toggleClass('position'); $('.boardGridPiece').click(function () { $('.position').removeClass('position'); var gridSelected = $(this); gridSelected.toggleClass('position'); var thisBox = $('.position'); var finalX = 0; var finalY = 0; for (var i = 0; i < 9.00; i++) { for (var j = 0; j < 16.00; j++) { var aBox = $('#gameboard').find('tr:nth-child(' + (i + 1) + ')').find('td:nth-child(' + (j + 1) + ')').find('div'); if (thisBox.get(0) == aBox.get(0)) { finalX = j + 1; finalY = i; i = j = 16; // soft break } } } var overX = (finalX * parseFloat(1920))/16.00; var downY = (finalY * parseFloat(1080))/9.00; $('#player').animate({ left: overX, top: downY });}); 

 html { background-color:gray; } #gameboard { margin: 100px; height:1080px; width:1920px; border:1px solid black; } .boardGridPiece { height: 110px; width: 110px; } .position { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border: 1px solid red; } #player { position: absolute; top: 120px; left: 125px; height: 200px; width: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="gameboard" style=""></table> <img id="player" src="http://img2.wikia.nocookie.net/__cb20110819034426/halo/images/7/74/ODST_Helljumper.png" />