JSFiddle - React, Tailwind, and code Playground

by Kriem

HTML

<ul>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul>

CSS

ul
{
	display: block;
	overflow: hidden;
	border: blue 1px solid;
}

li
{
	display: inline;
	float: left;
}

li a
{
	display: inline-block;
	border: red 1px solid;
	width: 100px;
}

JavaScript

var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});