How to create a 'horizontal-scroll-bar' that 'loops, the content inside' (allowing for endless scrolling to the right/left)?

New to programming/code- here, and struggling a bit in finding/creating the right code! Any assistance would be greatly appreciated!

First thing's first, here's my CSS & HTML Code:

CSS:

.LoopingScroll{
  overflow-x: auto;
  white-space: nowrap;
  max-width: 200px;
}

While the HTML is:

<!doctype html>
<html>
 <head>
  <title>LoopingScroll</title>
  <link rel="stylesheet"
   href="style.css">
 </head>

 <body>

<table class="table"> 

    <thead>
        <tr> 
      <th>TestingA</th> 
      <th>TestingB</th>
      <th>TestingC</th>
    </tr> 
    </thead> 

  <tbody>   
      <tr class="active"> 
      <td>TestingD</td> 
      <td>TestingE</td>
      <td class="LoopingScroll"> 
        Testing01 Testing02
        Testing03 Testing04
        Testing05 Testing06
        Testing07 Testing08
      </td> 
    </tr> 
     </tbody> 

</table> 

  <script src="script.js">
  </script>
 </body>
</html>

Now, here's what I have: "I have a horizontal scroll bar that shows me "Testing01" to "Testing08"." This is great. This is what i want, though: **"I'd like, as people, use the horizontal scroll bar, to go from "Testing01 to Testing08." I WOULD LIKE THEM SCROLL BAR CONTENT TO LOOP AGAIN, so "the people, can keep scrolling to the right, and it keeps looping from testing 01 to testing 08 and after testing08 is testing 01 going to testing 08 again n again n again. so the ppl, never, have to go 'scroll left' **(unless they want to. it'd be awesome if they 'go left, they can also go endlessly to the left but that's not a main priority right now.')

My main question that I be struggling with is: "Does anyone know/have-recommendations for the code that I should be using for a horizontal scroll bar that loops its content?"

Thanks!

-Scholah

Solution

Here is a solution using JavaScript:

document.addEventListener("DOMContentLoaded", function() {
  const scrollElement = document.querySelector('.LoopingScroll');
  let originalContent = scrollElement.innerHTML;
  let contentToAdd = originalContent;

  scrollElement.addEventListener('scroll', function() {
    let atRightEnd = (scrollElement.scrollWidth - scrollElement.scrollLeft - scrollElement.clientWidth) < 50;

    if (atRightEnd) {
      scrollElement.innerHTML += contentToAdd;
    }
  });
});

.LoopingScroll {
  overflow-x: auto;
  white-space: nowrap;
  max-width: 200px;
}

<table class="table">
  <thead>
    <tr>
      <th>TestingA</th>
      <th>TestingB</th>
      <th>TestingC</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>TestingD</td>
      <td>TestingE</td>
      <td class="LoopingScroll">
        Testing01 Testing02 Testing03 Testing04 Testing05 Testing06 Testing07 Testing08
      </td>
    </tr>
  </tbody>
</table>