JavaScript：在溢出自动中单击时显示隐藏元素

Question

I have a set of elements grouped in a parent having overflow-auto .

I need to scroll/place an element to the right-most when clicked if possible. This way, the previous items are auto-scrolled to the left, placing it 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>

Example:

Start:

After clicking "13":

Answer 1

The following solved the issue:

Add a click event listner to the items and call event.currentTarget.scrollIntoView() .