Question

场景：我有一个超出窗口大小的动态表（它很大，100x100个单元格150px高和宽），并且我已禁用页面上的滚动。

目的：我试图让它成为当你点击一个td单元格时，javascript抓取身体坐标（窗口coordindates会出错），并移动表格以便你点击的单元格如果这有助于澄清我禁用滚动的原因，那么它就会在屏幕上显示为中心（如果这有助于澄清我禁用滚动的原因）。

尝试：这是我的代码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功能进行一些更新，我更改了您的部分内容：

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;*/
}

小提琴：http://jsfiddle.net/qwertynl/2gdCz/
整页演示：http://jsfiddle.net/qwertynl/2gdCz/show/

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

1 个答案: