如何自动滚动到水平表格中的特定表格单元格

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/