使用带有 css 选择器的 Javascript 滚动

Question

I have a little problem with scrolling pop-up window. I want to scroll popup which has div and some css code. no ID or CLASS.

HTML CSS Code

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

JS Code i have Tried

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

same code works for classes and id's

<div class="123">

JS:

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

It's an instagram like pop-up. i want to scroll using div or css selector (or both same time) using JS code

Answer 1

Your code would work if there was only one div on the page. It's likely that you might have other divs on the page and the div you're after might not be the first.

If you want to scroll all overflow divs on the page you could do something like this

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;
  }
}

If not you could try to locate the exact div using querySelector and specifying a parent (your popup) id or class name and selecting the child div.

eg

document.querySelector("#popup_div_id div");

Solution based on your comments

 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>