Looking for some help as a beginner in programming and coding! I'm having trouble finding or creating the right code, any assistance would be highly appreciated!
Firstly, here's the CSS and HTML code I have:
CSS:
.LoopingScroll{
overflow-x: auto;
white-space: nowrap;
max-width: 200px;
}
The HTML code is as follows:
<!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>
Currently, I have a horizontal scrollbar that displays "Testing01" to "Testing08" which is good. But what I really want is for the content to loop when users scroll from "Testing01" to "Testing08" continuously. Essentially, I want the horizontal scrollbar to endlessly loop from testing 01 to testing 08 and repeat smoothly without requiring users to scroll left (unless they choose to).
The main issue I'm struggling with is: "Does anyone know of a recommended code solution for creating a looping horizontal scrollbar?"
Any suggestions would be greatly appreciated!
-Scholah