javascript - How to auto scroll to a specific table cell in a horizontal table - Stack Overflow

admin管理员组

文章数量:1317915

In my current project I have a table contained within a div that has 10 cells positioned horizontally. This is done using the following code below...

<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>

I already have code saying that if a user clicks on a button that corresponds to a cell in the table, the cell will highlight yellow. Since the table's width is larger than the horizontal width of the page's container, I had to set the div table overflow property to auto. How can I make it so that if the user clicks a button for a specific cell that is not in view or only has some part of the cell in view, the table will auto scroll horizontally (left or right depending on the cell's location and the current view) to that specific cell.

Is there a JavaScript solution that would allow me to do this?

In my current project I have a table contained within a div that has 10 cells positioned horizontally. This is done using the following code below...

<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>

I already have code saying that if a user clicks on a button that corresponds to a cell in the table, the cell will highlight yellow. Since the table's width is larger than the horizontal width of the page's container, I had to set the div table overflow property to auto. How can I make it so that if the user clicks a button for a specific cell that is not in view or only has some part of the cell in view, the table will auto scroll horizontally (left or right depending on the cell's location and the current view) to that specific cell.

Is there a JavaScript solution that would allow me to do this?

• javascript
• html

Share Improve this question Follow asked Jun 20, 2014 at 14:35 stefankramstefankram 4322 silver badges55 bronze badges 1

• Does <a href="#cellcontent">go to cell</a> with <a name="cellcontent"> work? I'm not sure if it also scrolls horizontally – maja Commented Jun 20, 2014 at 14:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

In order to scroll at any position within the same page, you can use the following:

Mark the element, where you want to scroll to, with this tag:

<a id="cellcontent">

And in order to scroll to that marker, just use a simple a-tag:

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

Alternatevely, you can try it with JavaScript:

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

Source: https://developer.mozilla/en-US/docs/Web/API/Element.scrollIntoView

Edit: As Pluto suggested in the ments, the better approach is to put the id-tag directly into the cell:

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

Apart from @maja's solution, you can also do it with javascript using the cell's left position with the function getBoundingClientRect() minus its margin and padding. Then moving the window or scroll container to that scroll position with element.scrollTo() function Ex:

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

Check this fiddle: http://jsfiddle/RXKmY/

本文标签： javascriptHow to auto scroll to a specific table cell in a horizontal tableStack Overflow