動態表格單元中心頁面

Question

場景：我有一個超過窗口大小的動態表格（它很大，100x100的單元格高150px），並且我禁用了頁面上的滾動功能。

目的：我試圖做到這一點，當你點擊一個td單元格時，javascript會抓住body座標（窗口座標將會出錯），並移動表格以便你點擊的單元格被敲擊死在屏幕中心，因爲它會得到（這是一個地圖，你「走」，如果這有助於澄清爲什麼我禁用滾動）。

嘗試：這裏是我的代碼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;*/ 
} 

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