[Malleys]

<div class="table-container" id="tbl">
	<div class="table">
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Error ipsamaliquam 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>
	<button class="table➡">&#129146;</button>
	<button class="table⬅">&#129144;</button>
</div>
<style>
	
	.table-container {
		position: relative;
		width: 800px;
		border: 1px solid #000;
		margin: 0 auto;
		overflow: hidden;
	}

	.table {
		width: 1500px;
		background-color: lightblue;
		left: 0;
		height: 500px;
		line-height: 30px;
		padding: 20px;
/*		transition: transform 5s cubic-bezier(0, 0, 1, 1);*/
	}

	.table⬅,
	.table➡ {
		all: unset;
		position: absolute;
		top: 50%;
		text-align: center;
		transform: translate(0, -50%);
		width: 50px;
		height: 50px;
		cursor: pointer;
		background-color: black;
		color: white;
	}

	.table⬅ {
		left: 0;
	}

	.table➡ {
		right: 0;
	}

</style>

<script>
	
	class My {
		constructor(root) {
			this.root = root;
			this.table = root.querySelector(".table");
			this.arrowRight = root.querySelector(".table➡");
			this.arrowLeft = root.querySelector(".table⬅");
			
			this.x = 0;
			
			for(const element of [this.arrowRight, this.arrowLeft]) {
				element.addEventListener("pointerover", this.pointerOverHandler.bind(this));
				element.addEventListener("pointerout", this.pointerOutHandler.bind(this));
			}
		}
		
		pointerOverHandler({ target }) {
			console.log(target);
			if(target === this.arrowLeft ) { this.target = 0;    } else
			if(target === this.arrowRight) { this.target = -this.table.offsetWidth + this.root.offsetWidth; } else return;
			
			this.isOver = true;
			this.loop();
		}
	
		pointerOutHandler() {
			this.isOver = false;
		}
	
		loop() {
			if(!this.isOver) return;

			this.update(this.target);
			this.table.style.transform = `translateX(${this.x}px)`;
			requestAnimationFrame(this.loop.bind(this));
		}
	
		update(target) {
			this.x = 0.95 * this.x + 0.05 * target;
		}
	
	}
	
	new My(tbl);

</script>