javascript - 未捕获的 TypeError : scrollIntoView is not a function. 子元素未显示

Question

我对“scrollIntoView”有疑问。目前无法正常工作。我正在尝试使具有“active”类的列表项元素可见。有一个固定高度的无序列表，可以容纳多个元素。有些元素不可见，您必须滚动到它们。我正在尝试使用“scrollIntoView()”，但它不起作用。请帮助我。

function _ScrollTopImageNav() {
    var imageElement = document.getElementsByClassName("active");
    imageElement.scrollIntoView({
        behavior: "smooth"
    });
}

ul {
  list-style: none;
  height: 150px;
  overflow-y: auto;
  margin: 30px;
}

ul > li {
  background-color: aqua;
  height: 30px;
  width: 30px;
  display: block;
}

ul > li + li {
  margin-top: 10px;
}

ul > li.active {
background-color: red;

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="active"></li>
</ul>

<a href="#" onclick="_ScrollTopImageNav()"> show element</a>

Answer 1

getElementsByClassName 返回数组，但您需要单个元素，请使用

访问它

imageElement[0].scrollIntoView

另外，some browsers 似乎不支持行为:“smooth”

下面是工作演示

function _ScrollTopImageNav() {
  var imageElement = document.getElementsByClassName("active");
  imageElement[0].scrollIntoView();
}

  ul {
  list-style: none;
  height: 150px;
  overflow-y: auto;
  margin: 30px;
}

ul>li {
  background-color: aqua;
  height: 30px;
  width: 30px;
  display: block;
}

ul>li+li {
  margin-top: 10px;
}

ul>li.active {
  background-color: red;

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="active"></li>
</ul>

<a href="#" onclick="_ScrollTopImageNav()"> show element</a>