Javascript jQuery偏移量问题与div溢出：滚动

我正在写一个HTML5棋盘游戏，我对jQuery的offset（）有问题。组成游戏板的DIV网格位于包装DIV中，包装DIV具有设置溢出的CSS：滚动/宽度和高度：100%。游戏板本身相当大，因此滚动可以是相当大的水平和垂直位

问题是，当我单击一个DIV并尝试将玩家移动到该棋盘时，玩家会四处移动，并且永远不会相对于单击的棋盘位于一致的位置

代码：

您可以看到，单击棋盘时，棋盘的偏移量会被抓取并设置为玩家的X和Y

CSS:

根据玩家相对于当前滚动视图的位置，当我点击一个棋盘时，他会以非常不一致的方式移动。有时他在我点击的地方的最左边，或者在最上面，等等

---

我做错了什么？如何考虑相对滚动位置以获得一致的定位？

这里有一个供您使用的板作为示例。此外，还包括我对jquery的尝试。基本上，它会找到单击的位置，以浮动形式计算px距离，并设置士兵滑动到新位置的动画：

var black=''；
var-white=''；
变量平方=[黑色，白色]；
var grid=“”；
对于（变量i=0；i<9；i++）{
网格+=“”；
对于（var j=0；j<16；j++）{
网格+=正方形[（i+j）%2]；
}
网格+=“”；
}
$（“#游戏板”）.append（网格）；
var gridSelected=$（'#gameboard'）.find（'tr:nth child（2）'）.find（'td:first'）.find（'div'）；
gridSelected.toggleClass（'position'）；
$（'.boardGridPiece'）。单击（函数（）{
$（'.position'）.removeClass（'position'）；
var gridSelected=$（此项）；
gridSelected.toggleClass（'position'）；
var thisBox=$（'.position'）；
var finalX=0；
var最终=0；
对于（变量i=0；i<9.00；i++）{
对于（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；//软断开
}
}
}
var overX=（finalX*parseFloat（1920））/16.00；
var downY=（最终*parseFloat（1080））/9.00；
$（“#player”）.animate（{left:overX，top:downY}）；}）
html{
背景颜色：灰色；
}
#游戏板{
利润率：100像素；
高度：1080px；
宽度：1920像素；
边框：1px纯黑；
}
B.板栅{
高度：110px；
宽度：110px；
}
.职位{
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
边框：1px纯红；
}
#玩家{
位置：绝对位置；
顶部：120px；
左：125px；
高度：200px；
宽度：自动；
}

首先，你有一个打字错误，
（$（this）.offset（）.top；
。删除第一个括号。如果你能给我们提供一把小提琴就太好了。我删除了一些代码来简化原来的问题（$（this）.offset（）.top-$（window.scrollTop（））+400；，删除此项没有任何作用。如果不提供小提琴，我想我们很难帮助您。因为从上面的代码看，它看起来不错。希望您不介意使用代码笔，向下向右滚动，到达棋盘中央的播放器（测试图像）找到了。太棒了，谢谢！我今天要玩这个并重新整理我的代码。
$(".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"));
    }
});

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

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