JSFiddle - React, Tailwind, and code Playground

by RedAsset

HTML

<div id="scrollable">
  <b>&lt;$scrollable&gt;</b><br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta vel diam et ullamcorper. Praesent tristique, arcu sit amet egestas venenatis, dui orci tincidunt lorem, in mattis nulla ante sit amet dui. Praesent auctor urna augue, sit amet pellentesque dui ultricies fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vestibulum vitae elit varius lacinia. In eu orci lorem. Curabitur in metus gravida elit ornare rhoncus eu tristique est. Integer varius leo et molestie consequat.
</div>
<button onclick="scrollToLeft()">
  scroll left
</button>
<button onclick="scrollToRight()">
  scroll right
</button> These buttons should also be position: fixed inside of the container.

CSS

#scrollable {
  border: 1px solid black;
  width: 200px;
  height: 100px;
  overflow-x: scroll;
  overflow-y: hidden;
  text-overflow: hidden;
  white-space: nowrap;
}

JavaScript

function scrollToLeft() {
	document.getElementById('scrollable').scrollLeft -= 200;
}

function scrollToRight() {
	document.getElementById('scrollable').scrollLeft += 200;
}