Question

我有一个包含两个子元素的父容器。左边的元素是从数据库查询返回的项目的列表。父容器的高度固定，因此左侧面板中返回的所有项目都可以在该左侧面板（而不是主体）中滚动。

导航到此页面时，我希望左侧面板位于匹配元素ID的位置。我将通过Angular的路由订阅处理此ID，但出于演示目的，我在此处进行了硬编码。

我没有运气尝试过下面的代码（主要是JS）。任何帮助将不胜感激。

    var list = document.getElementById("list");
    var targetLi = document.getElementById('myID');
    list.scrollTop = (targetLi.offsetTop - 50);

#wrapper {
  width:1280px;
  height:600px;
  border:1px solid #d9d9d9;
  border-radius:5px;
  display:flex;
  margin:20px auto;
}

#list {
  width:200px;
  height:100%;
  border-right:1px solid #d9d9d9;
  display:flex;
  overflow:hidden;
}

#right span {
  color:#999;
  font-size:12px;
  font-family:helvetica;
}

ul {
  width:100%;
  margin:0;
  padding:0;
  list-style:none;
  overflow-y: scroll;
}

li {
  width:100%;
  padding:20px 10px;
  box-sizing:border-box;
  border-bottom:1px solid #d9d9d9;
  display:block;
  font-family:helvetica;
  color:#666;
}

<div id="wrapper">
  <div id="list"> 
    <ul>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>      <li>
      Item
      </li>      <li>
      Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li>
        Item
      </li>
      <li id="myID">
        Item with ID
      </li>

    </ul>
  </div>
  <div id="right"> 
    <button id="button">Demo purposes button</button>
    <span> Note: this would instead be called in 'ngAfterViewInit' or after the firestore query has completed.
  </div>
</div>

Answer 1

在所有浏览器上都可以使用的最佳（仅AFAIK）选项是实现隐藏的输入元素（例如复选框），并将焦点设置到该元素。这样，浏览器将滚动容器，以便可以看到焦点输入。诀窍不是将样式设置为display: none，而是仅使元素在视觉上不可见，例如：

opacity: 0;
width: 0;
height: 0;
display: block;

如何滚动到可滚动div中的元素？

1 个答案: