Set Scroll position on table row cell when selected

peter liles 556 Reputation points

I have code for a scrollable table that contains multiple rows and when you enter a specific row number in textbox the scroll is reset to vertical row position on table.
I now want to convert to a horizontal table instead as shown with single row and multiple cells and able to scroll to table cell position when a column index value is entered into textbox.
All the code is included

   <div id="scroll-pane" style="width:200px; height:100px; overflow-x:scroll; overflow-x:hidden;">  

<table id="tabscroll">
<tr><td>item 0</td>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
<td>item 4</td>
<td>item 5</td>
<td>item 6</td>
<td>item 7</td>
<td>item 8</td>
<td>item 9</td>
<td>item 10</td></tr>
<input type="text" id="rowNum" />
<input type="button" id="submit" value="go!" />

    var divEl = document.getElementById("scroll-pane");  
    var selectedTrEl = undefined;  

    function select(index) {  
        var trEl = divEl.getElementsByTagName("tr")[index];  
        if (selectedTrEl) {  
            selectedTrEl.className = "";  
        selectedTrEl = trEl;  
        selectedTrEl.className = "selected";  
        var scrollTo = selectedTrEl.offsetTop;  
        divEl.scrollTop = scrollTo;  


    document.getElementById("submit").onclick = function () {  
        var rowNum = document.getElementById("rowNum").value;  
        if (rowNum && rowNum.match(/\D/)) {  
            alert("Integers only!");  
        if (rowNum) {  
A set of technologies in the .NET Framework for building web applications and XML web services.
3,404 questions
0 comments No comments
{count} votes

Accepted answer
  1. QiYou-MSFT 4,311 Reputation points Microsoft Vendor

    Hi @peter liles ,

    In your code, offsetTop is a read-only property that returns the pixel value of the offset of the current element relative to the top boundary of the offsetParent node. scrolltop is a method in jQuery that sets the <div> vertical offset of the scroll bar in an element. Since what you want to do now is move horizontally, you can change offsetTop to offsetLeft and scrolltop to scrollleft.

    Best Regards,
    Qi You

4 additional answers

Sort by: Most helpful
  1. peter liles 556 Reputation points

    It works!
    There is a fault. When i enter a integer value that represents cell position, say 1 and then increment by 1 the scroll bar seems to behave unexpectant.
    It is positioned further forward than expected. It seems to me to be adding an extra index on each iteration?
    i attempted adding -1 to divEl.scrollLeft = scrollTo-1; doesnt work

  2. peter liles 556 Reputation points

    Works a treat. Thankyou very much.
    An improvement to the script would be a pause button on the scroll position, as it always jumps back to start position on button2 click event. When it is required for a user to select current image shown.

  3. peter liles 556 Reputation points

    nothing seems to just snaps back to start position even when i remove the clearinterval method?

  4. peter liles 556 Reputation points

    Is it possible to pause the scroll at any point instead of a predetermined point?