Question posted in 
I want to create buttons that will stay at the same point vertically as a use scrolls through long tables. The purpose of the buttons is to allow them to scroll horizontally for the table. So I want them to stay in the table and only be visible in the table. Using fixed causes them to break out and be tied to the viewport. If I add the translatez:(0) to the parent container the buttons no longer move with the center of the page.
document.addEventListener('DOMContentLoaded', function() {
const tableContainer = document.getElementById('table-container');
const scrollLeft = document.getElementById('scroll-left');
const scrollRight = document.getElementById('scroll-right');
let scrollInterval;
function updateArrows() {
scrollLeft.style.display = tableContainer.scrollLeft > 0 ? 'block' : 'none';
scrollRight.style.display = (tableContainer.scrollWidth > tableContainer.clientWidth) &&
(tableContainer.scrollLeft < tableContainer.scrollWidth - tableContainer.clientWidth) ? 'block' : 'none';
}
function startScrolling(direction) {
stopScrolling(); // Ensure no other scrolling is active
scrollInterval = setInterval(function() {
tableContainer.scrollBy({
left: direction === 'left' ? -10 : 10,
behavior: 'smooth'
});
}, 50); // Adjust scroll speed by changing the interval time or the scroll amount
}
function stopScrolling() {
clearInterval(scrollInterval);
}
scrollLeft.addEventListener('mousedown', function() {
startScrolling('left');
});
scrollRight.addEventListener('mousedown', function() {
startScrolling('right');
});
document.addEventListener('mouseup', stopScrolling);
document.addEventListener('mouseleave', stopScrolling);
tableContainer.addEventListener('scroll', updateArrows);
// Initial check
updateArrows();
});.scroll-container {
position: relative;
display: flex;
align-items: center;
width: fit-content;
margin: 0 auto;
/* transform: translateZ(0);*/
}
.table-container {
overflow-x: auto;
white-space: nowrap;
width: 300px;
/* Adjust based on your design */
border: 1px solid #ddd;
position: relative;
/* Needed for absolute positioning of arrows */
}
.scroll-arrow {
position: fixed;
top: 50%;
transform: translateY(-50%);
background-color: #f1f1f1;
border: 1px solid #ddd;
padding: 5px;
cursor: pointer;
display: none;
z-index: 1;
}
#scroll-left {
left: 0;
}
#scroll-right {
right: 0;
}
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
}<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum exercitationem dolores animi quasi odit deserunt, reprehenderit facere veritatis natus. Iusto error sunt cumque delectus rem obcaecati et temporibus cum ea?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum exercitationem dolores animi quasi odit deserunt, reprehenderit facere veritatis natus. Iusto error sunt cumque delectus rem obcaecati et temporibus cum ea?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum exercitationem dolores animi quasi odit deserunt, reprehenderit facere veritatis natus. Iusto error sunt cumque delectus rem obcaecati et temporibus cum ea?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum exercitationem dolores animi quasi odit deserunt, reprehenderit facere veritatis natus. Iusto error sunt cumque delectus rem obcaecati et temporibus cum ea?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum exercitationem dolores animi quasi odit deserunt, reprehenderit facere veritatis natus. Iusto error sunt cumque delectus rem obcaecati et temporibus cum ea?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum exercitationem dolores animi quasi odit deserunt, reprehenderit facere veritatis natus. Iusto error sunt cumque delectus rem obcaecati et temporibus cum ea?</p>
<div class="scroll-container">
<button id="scroll-left" class="scroll-arrow"><</button>
<div id="table-container" class="table-container">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<!-- More rows as needed -->
</tbody>
</table>
</div>
<button id="scroll-right" class="scroll-arrow">></button>
</div>
2
Answers
I hope below solution works for you (Run Snippet). I hope this is what you wanted.
I did the following:
See below for more clarity.
Thankyou
Like this (run the snippet)? Then you need to add
position: absoluteto class.scroll-arrow.