如何滚动到可滚动 div 内的元素？答案

【问题标题】：How can I scroll to an element inside a scrollable div?如何滚动到可滚动 div 内的元素？
【发布时间】：2019-12-25 16:51:10
【问题描述】：

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

导航到此页面时，我希望将左侧面板定位在匹配元素 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>

【问题讨论】：

似乎是重复的（Angular 只是 JavaScript）：stackoverflow.com/questions/27980084/…
谢谢，我已经尝试过了，但它不能在 Angular 中工作（这就是我将 Angular 放在这里的原因） - 这很可能只是我的设置，我不完全确定，但是和上面的差不多。
多亏了您的重复参考，它才能正常工作。 @isherwood - 谢谢。返回的混合数据和重组 HTML 以允许以不同的方式滚动。

标签： javascript angular scroll

【解决方案1】：

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

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

【讨论】：