使用帶有 css 選擇器的 Javascript 滾動

Question

我在滾動彈出窗口時遇到了一些問題。 我想滾動具有 div 和一些 css 代碼的彈出窗口。 沒有 ID 或 CLASS。

HTML CSS 代碼

<div style="height: 356px; overflow: hidden auto;">

我試過的 JS 代碼

var objDiv = document.getElementsByTagName("div");
objDiv[0].scrollTop = objDiv[0].scrollHeight;

相同的代碼適用於類和 ID

<div class="123">

JS：

var objDiv = document.getElementsByClass("123");
objDiv[0].scrollTop = objDiv[0].scrollHeight;

這是一個類似彈出窗口的Instagram。 我想使用 JS 代碼使用 div 或 css 選擇器（或兩者同時）滾動

Answer 1

如果頁面上只有一個 div，您的代碼就可以工作。 您可能在頁面上有其他 div，而您要查看的 div 可能不是第一個。

如果您想滾動頁面上的所有溢出 div，您可以執行以下操作

var divs = document.getElementsByTagName("div");

for (let div of divs) {
  if (div.style.overflow.includes("auto")) {
    div.scrollTop = div.scrollHeight;
    // break if you only want the first match
    // break;
  }
}

如果不是，您可以嘗試使用querySelector並指定父（您的彈出窗口）ID 或類名並選擇子 div 來定位確切的 div。

例如

document.querySelector("#popup_div_id div");

根據您的意見解決方案

 var div = document.querySelector("div[style='flex-direction: column;']"); div.scrollTop = div.scrollHeight;

 div { height: 100px; width: 200px; overflow: auto; }

 <div style="flex-direction: column;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in viverra justo. Praesent in eros eget dui accumsan accumsan et suscipit ante. Aenean nec eros dignissim, luctus magna quis, rutrum augue. </div>