div容器內的滾動文本不可見

Question

我有一個包含一些短語示例的 div：

<div class="container">
  <div class="phrase-doc">Lorem ipsum bla bla</div>
  <div class="phrase-doc">Lorem ipsum bla bla</div>
  <div class="phrase-doc">Lorem ipsum bla bla</div>
  <div class="phrase-doc active">Lorem ipsum bla bla</div>
  <div class="phrase-doc">Lorem ipsum bla bla</div>
  <div class="phrase-doc">Lorem ipsum bla bla</div>
  <div class="phrase-doc">Lorem ipsum bla bla</div>
</div>
<button class="btn">Move</button>

當我單擊按鈕時，我想在活動短語上移動滾動條，我使用此代碼

this.el.nativeElement.querySelector('.phrase-doc.active').scrollIntoView();

並且僅當容器在頁面上可見時才能正常工作，但如果容器不可見，則頁面滾動會在其上移動，我希望頁面滾動保持在相同的 position 並且只有容器內的滾動會在活動短語上移動並且如果容器不可見，則不應滾動到視圖中。

Answer 1

如果容器不可見，則不應滾動到視圖中。

這是有問題的，因為沒有 API 支持它。 scrollIntoView的目的是使該內容可見。

你可以做的是讓每個可滾動的祖先的滾動 position 保存它們的值，並在scrollIntoView調用之后恢復它們。

這樣做的缺點是您可以對可滾動的祖先（如果需要的話）和scrollIntoView （或者至少在沒有額外工作的情況下）使用smooth滾動。

 document.querySelector('.btn').addEventListener('click', () => { // here you should check all ascendants of `container` that a scrollable // instead of doing that only for window const { scrollX, scrollY } = window document.querySelector('.phrase-doc.active').scrollIntoView({ block: 'nearest', inline: 'start' }); // here you should restore the scroll for all the found elements and not only window window.scroll(scrollX, scrollY) })

 .pre { height: 100vh; }.container { overflow: auto; height: 20px; }.post { height: 200vh; }

 <button class="btn">Move</button> <div class="pre"> </div> <div class="container"> <div class="phrase-doc">Lorem ipsum bla bla</div> <div class="phrase-doc">Lorem ipsum bla bla</div> <div class="phrase-doc">Lorem ipsum bla bla</div> <div class="phrase-doc active">1Lorem ipsum bla bla</div> <div class="phrase-doc">Lorem ipsum bla bla</div> <div class="phrase-doc">Lorem ipsum bla bla</div> <div class="phrase-doc">Lorem ipsum bla bla</div> </div> <div class="post"> </div>

Answer 2

您必須激活 dom 標簽。

document.querySelector('.btn').addEventListener('click',function (){
    var eleActive = document.querySelector('.phrase-doc.active')
    eleActive.scrollIntoView()
})