使用带有 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>