如何滾動到可滾動div中的元素？

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;