javascript - 动态表格单元格的中心页面

Question

场景:我有一个超过窗口大小的动态表格(它很大，100x100 个单元格，150 像素高和宽)，并且我禁用了页面滚动。

目的:我试图做到这一点，以便当您单击 td 单元格时，javascript 获取 body 坐标(窗口坐标将是错误的)，并移动表格以便您单击的单元格在屏幕中心会死掉(如果这有助于阐明我禁用滚动的原因，它就是您“行走”的 map )。

尝试:这是一个fiddle我的代码。如您所见，我不认为 window.scrollTo 正在做我想做的事情，它只是向下滚动页面。如何让我点击的单元格移动表格，就像我滚动到那个单元格一样？

代码:

function centerCell() {
    window.scrollTo(this.offsetLeft,this.offsetTop);
}
function genDivs(divs){ 
    var root = document.createElement("table");
    for(var x = 0; x <= divs; x++){ 
        var row = document.createElement("tr");
        for(var y = 0; y <= divs; y++){ 
            var cell = document.createElement("td"); 
            cell.textContent = x+","+y;
            cell.addEventListener("click",centerCell,false);
            row.appendChild(cell); 
        } 
        root.appendChild(row); 
    }
    root.style.width=String(divs*150)+"px";
    root.style.height=String(divs*150)+"px";
    var main = document.getElementById("container");
    main.appendChild(root);
}
genDivs(100);

Answer 1

您需要对您的 centerCell 函数进行一些更新，我更改了您的一些 css:

JS:

function centerCell() {
    var w2 = this.offsetWidth / 2,
        h2 = this.offsetHeight / 2;
    var t = this.offsetTop + h2,
        l = this.offsetLeft + w2;
    var w = window.innerWidth / 2,
        h = window.innerHeight / 2;
    window.scrollTo(l - w, t - h);
}

CSS:

#container {
    /*overflow: hidden;*/
}

fiddle :http://jsfiddle.net/qwertynl/2gdCz/
整页演示:http://jsfiddle.net/qwertynl/2gdCz/show/