免责声明：请没有jQuery解决方案，无法使用它。

我有一个父元素，当子元素悬停在上面时，我想滚动它

例如：

<style>
.container-of-labels {
  background-color: green;
  height: 20px;
  overflow-y: auto;
}
</style>

<div class="container-of-labels>
  <label id="l1">1</label>
  <label id="l2">2</label>
  <label id="l3">3</label>
</div>

Js：

//This runs 'onmouseenter'

function(childIndex) {
  const l = document.getElementById(`l${childIndex}`);

  // l.parentNode.scrollTop = l.offsetTop;

  //l.parentNode.scrollTop = l.offsetTop - l.parentNode.offsetTop

  /*
  l.scrollIntoView({
    behavior: 'smooth',block: 'center',inline: 'nearest'
  });
  */

这应该带父母滚动条并将其向下移动以将标签居中放置在中心上，但是却会像下面说明的那样充当越野车。

  l.parentNode.scrollTop = l.offsetTop;
  l.parentNode.scrollTop = l.offsetTop - l.parentNode.offsetTop;

这将滚动到div的底部，即使偏移量并不总是大于父节点的高度

同时

  l.scrollIntoView({
    behavior: 'smooth',inline: 'nearest'
  });

滚动整个屏幕吗？

我是否可以从父div滚动（使用'scrollIntoView'偏好）？