如何自動滾動到水平表格中的特定表格單元格

Question

在我當前的項目中，我有一個包含在div中的表格，該表格中有10個水平放置的單元格。 這是使用下面的代碼完成的...

<div id="dashboard">
    <table>
        <tr>
            <td><div id="cell1"></div></td>
            <td><div id="cell2"></div></td>
            <td><div id="cell3"></div></td>
            <td><div id="cell4"></div></td>
            <td><div id="cell5"></div></td>
            <td><div id="cell6"></div></td>
            <td><div id="cell7"></div></td>
            <td><div id="cell8"></div></td>
            <td><div id="cell9"></div></td>
            <td><div id="cell10"></div></td>
        </tr>
    </table>
</div>

我已經有代碼說，如果用戶單擊與表中單元格相對應的按鈕，則該單元格將突出顯示黃色。 由於表的寬度大於頁面容器的水平寬度，因此我不得不將div表的溢出屬性設置為auto。 我該如何做到這一點，以便如果用戶單擊某個不在視圖中的特定單元格的按鈕， 或者只單擊視圖中某個單元格的一部分 ，則表格將自動水平滾動 （根據單元格的位置和位置自動向左或向右滾動）當前視圖）。

是否有JavaScript解決方案可以讓我做到這一點？

Answer 1

為了在同一頁面內的任何位置滾動，可以使用以下命令：

使用以下標記標記要滾動到的元素：

<a id="cellcontent">

為了滾動到該標記，只需使用一個簡單a -tag即可：

<a href="#cellcontent">go to cell</a>

另外，您可以嘗試使用JavaScript：

<script type="text/javascript">    
    function showIt(elID) {
        var el = document.getElementById(elID);
        el.scrollIntoView(true);
    }    
</script>

來源： https : //developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

編輯：正如冥王星在評論中建議的那樣，更好的方法是將id標簽直接放入單元格中：

<td id="cellcontent">Some content</td>

Answer 2

除了@maja的解決方案之外，您還可以使用JavaScript使用單元格的左側位置使用函數getBoundingClientRect()減去邊距和填充來完成此任務。 然后使用element.scrollTo()函數Ex將窗口或滾動容器移動到該滾動位置：

window.scrollTo(document.getElementById("cell4").getBoundingClientRect().left - 30,0);

檢查此小提琴： http : //jsfiddle.net/RXKmY/