yaparoff,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.table-container {
position: relative;
width: 800px;
border: 1px solid #000;
margin: 0 auto;
overflow: hidden;
}
.table {
width: 1500px;
background-color: lightblue;
height: 500px;
line-height: 30px;
padding: 20px;
}
.table-arrow {
position: absolute;
top: 50%;
transform: translate(0, -50%);
width: 50px;
height: 50px;
background-repeat: no-repeat;
cursor: pointer;
background-color: #000;
color: #fff;
line-height: 50px;
}
.table-arrow--left {
left: 0;
}
.table-arrow--right {
right: 0;
}
</style>
</head>
<body>
<div class="table-container">
<div class="table">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error ipsam aliquam rerum eius dicta laboriosam non quas, facere iure sapiente fugiat, blanditiis cumque illum libero, aspernatur ducimus minus reiciendis. Quis?
Quae enim voluptate quidem voluptates delectus nemo laudantium atque dolores sunt odio dolorum numquam earum eius mollitia, sed recusandae. Voluptatibus accusantium maxime quis amet quod rerum animi tenetur hic illo.
Asperiores a possimus fugiat enim amet nostrum, dolorem harum. Ullam sit sint ut dolores aliquid velit maxime debitis accusamus at, ipsum vitae voluptatem atque facere eius temporibus doloribus ratione non.
Facere, aperiam! Repellat quaerat, hic facilis perferendis eligendi quam optio quia minima saepe officia excepturi aliquid? Harum, voluptatum neque laudantium explicabo ipsa, doloremque officia qui ipsum quas adipisci aspernatur nemo.
Dicta quaerat veritatis expedita fuga obcaecati architecto labore non sit! Ipsa molestiae porro aliquid ea! Dolores fugiat repudiandae fuga unde placeat ex eveniet nisi esse amet, iusto, doloribus voluptatum eius.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error ipsam aliquam rerum eius dicta laboriosam non quas, facere iure sapiente fugiat, blanditiis cumque illum libero, aspernatur ducimus minus reiciendis. Quis?
Quae enim voluptate quidem voluptates delectus nemo laudantium atque dolores sunt odio dolorum numquam earum eius mollitia, sed recusandae. Voluptatibus accusantium maxime quis amet quod rerum animi tenetur hic illo.
Asperiores a possimus fugiat enim amet nostrum, dolorem harum. Ullam sit sint ut dolores aliquid velit maxime debitis accusamus at, ipsum vitae voluptatem atque facere eius temporibus doloribus ratione non.
Facere, aperiam! Repellat quaerat, hic facilis perferendis eligendi quam optio quia minima saepe officia excepturi aliquid? Harum, voluptatum neque laudantium explicabo ipsa, doloremque officia qui ipsum quas adipisci aspernatur nemo.
Dicta quaerat veritatis expedita fuga obcaecati architecto labore non sit! Ipsa molestiae porro aliquid ea! Dolores fugiat repudiandae fuga unde placeat ex eveniet nisi esse amet, iusto, doloribus voluptatum eius.
</div>
<div class="table-arrow table-arrow--right">вправо</div>
<div class="table-arrow table-arrow--left">влево</div>
</div>
<script>
const tableArrowLeft = document.querySelector('.table-arrow--left');
const tableArrowRight = document.querySelector('.table-arrow--right');
const table = document.querySelector('.table');
function timer(b) {
let c = true;
return {
stop: function() {
c = false
},
play: function() {
var d = performance.now();
c = !0;
requestAnimationFrame(function e(a) {
a = (a - d) / b.duration;
1 < a && (a = 1);
let i = b.from + (b.to - b.from) * a | 0;
b.elem.style.transform = 'translateX(' + -i + 'px)';
c && 1 == a && (d = performance.now());
c && requestAnimationFrame(e)
})
}
}
};
const anim = timer({
from : 0,
to : 700,
duration: 7 * 1000,
elem : table
});
tableArrowRight.addEventListener('mouseenter', anim.play);
tableArrowRight.addEventListener('mouseleave', anim.stop);
</script>
</body>
</html>