JavaScript: 在 overflow-auto 中点击显示隐藏元素

Question

我有一组元素分组在具有 overflow-auto.

的父元素中

如果可能的话，我需要 scroll/place 单击时最右边的元素。这样，前面的项目会自动滚动到左侧，将其放在视图的末尾。

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>

示例：

开始：

点击“13”后：

Answer 1

以下解决了问题：

为项目添加 click 事件侦听器并调用 event.currentTarget.scrollIntoView()。

JavaScript: 在 overflow-auto 中点击显示隐藏元素

JavaScript: show hidden element on click in overflow-auto

javascript

css

twitter-bootstrap

react-bootstrap

bootstrap-4