Set Scroll position on table row cell when selected

Question

Set Scroll position on table row cell when selected

peter liles 556

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

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

    select(9);  

    document.getElementById("submit").onclick = function () {  
        var rowNum = document.getElementById("rowNum").value;  
        if (rowNum && rowNum.match(/\D/)) {  
            alert("Integers only!");  
            return;  
        }  
        if (rowNum) {  
            select(parseInt(rowNum));  
        }  
    };

Accepted answer

4 additional answers

Your answer

Answer 1

QiYou-MSFT 4,326 Microsoft External Staff

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

peter liles 556 Reputation points

2022-11-23T19:05:36.38+00:00

Before i looked at this script i had in mind a image slider and i did not know at the time how this script would perform and it appears to work as first imagined!
Now i would like it to automatically scroll through say, 5 cells at a time over a set period on the click of a button, until reached its travel, then return, just like automatic sliders perform.
Also manually scroll 5 cells on individual click of a separate button and at end of travel, reset to first cell?
I presume you may possess knowledge of this routine and get it operating , in order to complete my initial mission.

Thanks

QiYou-MSFT 4,326 Microsoft External Staff

Hi @peter liles ,
You can try the following code:

<script type="text/javascript">  
        $(document).ready(function () {  
            $("button").click(function () {  
                let postop = 200;  
                $("div").animate({ scrollLeft: postop }, 3000, function (val){  
                    document.getElementById("scroll-pane").scrollTo(0, val);  
                });  
            });  
        });  
    </script>

"Postop" is the distance traveled, which you can adjust according to your needs.

Best Regards
Qi You

peter liles 556 Reputation points

2022-11-27T14:55:49.193+00:00

That looks fantastic!
I have avoided jquery because it would require to connect to library files. So i prefer to use the native javascript code. I tried to scroll at intervals using a preset settime function yet it would not scroll in durations only after completion of cycle?

QiYou-MSFT 4,326 Microsoft External Staff

Hi @peter liles
You can try the following code:

<script type="text/javascript">  
  
        document.getElementById("button1").onclick = function () {  
            var parent = document.getElementById('scroll-pane');  
  
  
           var sh= setInterval(function () {  
                if (parent.scrollLeft == 130) {  
                    parent.scrollLeft = 0;  
                      
                } else {  
                    parent.scrollLeft++;  
                }  
            }, 20);  
            document.getElementById("button2").onclick = function () {  
                clearInterval(sh);  
            };  
                  
        };  
         
    </script>

QiYou-MSFT 4,326 Reputation points Microsoft External Staff

2022-11-28T09:48:05.627+00:00

Hi @peter liles ,
The distance of ScrollLeft needs to be adjusted according to your own project, and if there are other requirements, I will try to help you solve them.

Best Regards
Qi You
QiYou-MSFT 4,326 Reputation points Microsoft External Staff

2022-11-28T09:51:13.117+00:00

I've set up a few layers of div in the style, just to show the result more clearly, you can also set it according to your needs.

Answer 2

peter liles 556

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

QiYou-MSFT 4,326 Reputation points Microsoft External Staff

2022-11-24T07:29:07.163+00:00

Hello @peter liles ，
You can adjust the width according to your table and what you want it to represent.
I changed the width to 55 so that only one item is displayed in each box, so that the scroll bar item is perfect, and it can be switched to any position you want (as long as it exists).

Answer 3

peter liles 556

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.

QiYou-MSFT 4,326 Reputation points Microsoft External Staff

2022-12-01T07:34:48.217+00:00

The role of button2 is mainly to call the clearInterval method, because the SetInterval method in button1 requires clearInterval to close. Of course, you can set the scroll bar to any position on the function of button2, just set the value of scrollleft.

Answer 4

peter liles 556

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

QiYou-MSFT 4,326 Microsoft External Staff

I have divided these things into a few examples to illustrate, I hope you can understand them better

Repeat the pattern back and forth
Click the "go" button, and the scroll bar will scroll back and forth according to the value set at the beginning. Click the "PAUSE" button and the scroll bar will pause. <script type="text/javascript">
var count = 0;
document.getElementById("button1").onclick = function () {
var parent = document.getElementById('scroll-pane');

         var sh = setInterval(function () {  

             if (parent.scrollLeft<=70&&count==0)  
                 parent.scrollLeft++;  
             if (parent.scrollLeft > 70 && count == 0)  
                 count = 1;  
             if (parent.scrollLeft > 0 && count == 1)  
                 parent.scrollLeft--;  
             if (parent.scrollLeft == 0 && count == 1) {  
                 count = 0;  
             }    

         }, 20);  
         document.getElementById("button2").onclick = function () {  
             clearInterval(sh);  
         };  

     };  

 </script>

266408-%E6%BB%9A%E5%8A%A8%E6%9D%A11.gif

QiYou-MSFT 4,326 Reputation points Microsoft External Staff

2022-12-02T05:57:23.2+00:00
Scroll to the predetermined position and return to the starting point
Click the "go" button and the scroll bar will scroll to the position you set, and once you have reached it, you will return to the starting point. Click the "PAUSE" button and the scroll bar will pause.
<script type="text/javascript">
var count = 0;
document.getElementById("button1").onclick = function () {
var parent = document.getElementById('scroll-pane');
var sh = setInterval(function () { if (parent.scrollLeft <= 70 ) parent.scrollLeft++; if (parent.scrollLeft > 70) parent.scrollLeft = 0; }, 20); document.getElementById("button2").onclick = function () { clearInterval(sh); }; }; </script>
QiYou-MSFT 4,326 Reputation points Microsoft External Staff

2022-12-02T05:58:20.83+00:00
Scrolling to a predetermined position does not return to the starting point, but the "PAUSE" button will help you get back to the starting point
Click the "go" button and the scroll bar will scroll to the position you set, and it will not return to the starting point after reaching it. Click the "PAUSE" button and the scroll bar will pause and return to the starting. <script type="text/javascript">
var count = 0;
document.getElementById("button1").onclick = function () {
var parent = document.getElementById('scroll-pane');
var sh = setInterval(function () { if (parent.scrollLeft <= 70 ) parent.scrollLeft++; }, 20); document.getElementById("button2").onclick = function () { clearInterval(sh); parent.scrollLeft = 0; }; }; </script>

QiYou-MSFT 4,326 Microsoft External Staff

Scroll to the predetermined position without returning to the starting point,
Click the "go" button and the scroll bar will scroll to the position you set, and it will not return to the starting point after reaching it. Click the "PAUSE" button and the scroll bar will be.

 <script type="text/javascript">var count = 0;  
         document.getElementById("button1").onclick = function () {  
             var parent = document.getElementById('scroll-pane');  
             var sh = setInterval(function () {  
                 if (parent.scrollLeft <= 70)  
                     parent.scrollLeft++;  
             }, 20);  
             document.getElementById("button2").onclick = function () {  
                 clearInterval(sh);  
             };  
         };

`</script>

266512-%E6%BB%9A%E5%8A%A8%E6%9D%A14.gif

Answer 5

peter liles 556

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

QiYou-MSFT 4,326 Reputation points Microsoft External Staff

2022-12-06T02:23:02.45+00:00

Yes, it is possible to implement. The predetermined point setting is my order to make you see the effect better, which is the value of parent.scrollLeft in the code. Since setInterval is a function that loops all the time, clearInterval is required to terminate the run. So as long as you don't set a predetermined point, let him keep increasing, and don't set the parent.scrollLeft value on button2 to achieve the operation to stop at any time.

Share via

Set Scroll position on table row cell when selected

4 additional answers

Your answer