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 - 标记：

<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-tag直接放入单元格中：

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

Answer 2

除了@ maja的解决方案之外，您还可以使用单元格的左侧位置使用函数getBoundingClientRect()减去其边距和填充来使用javascript。然后使用element.scrollTo()功能Ex：

将窗口或滚动容器移动到该滚动位置

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

检查这个小提琴：http://jsfiddle.net/RXKmY/

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

2 个答案: