I have a collection of items grouped within a container with overflow-auto applied.
When clicked, I want to scroll/place an item all the way to the right if possible. This will trigger the other items to auto-scroll to the left, positioning the clicked item at the end of the view.
for(let i = 1; i < 20; i++) {
document.getElementById("parent").innerHTML += `<div class='myItem margin-end-3 d-flex flex-column justify-content-center align-items-center'>${i}</div>`;
}.myItem {
height: 30px;
border-radius: 20px;
background-color: gray;
font-size: 15px;
padding: 20px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div id="parent" class="d-flex flex-row flex-nowrap overflow-auto my-18 py-1"></div>For Instance:
Initial State:
https://i.sstatic.net/GHuaU.png
After Clicking "13":