Navigating the page by utilizing Javascript through a CSS selector

Question

Navigating the page by utilizing Javascript through a CSS selector

I am encountering a small issue with scrolling a pop-up window. I am trying to scroll a popup that contains a div and some CSS code without using an ID or class.

Here is the HTML CSS Code snippet:

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

Below is the JavaScript code I have attempted:

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

The same code works for classes and IDs as well:

<div class="123">

JavaScript code for classes:

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

This relates to an Instagram-like pop-up. I am seeking a way to scroll using either a div, a CSS selector, or both simultaneously with JavaScript code.

javascript html css

Answer 1

Answer №1

Your code may need adjustments if there are multiple divs on the page. The first div might not necessarily be the one you want to target.

If you wish to scroll through all overflow divs on the page, you can use the following script:

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

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

If you prefer to specify a particular parent element (like your popup) and then select the child div using querySelector, you can try something like this:

For example:

document.querySelector("#popup_div_id div");

Solution adapted based on your feedback

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>

Answer 2

Your code may need adjustments if there are multiple divs on the page. The first div might not necessarily be the one you want to target.

If you wish to scroll through all overflow divs on the page, you can use the following script:

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

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

If you prefer to specify a particular parent element (like your popup) and then select the child div using querySelector, you can try something like this:

For example:

document.querySelector("#popup_div_id div");

Solution adapted based on your feedback

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>

Navigating the page by utilizing Javascript through a CSS selector

Answer №1

Similar questions

Using Google App Script's pageToken to store attachments on Google Drive

Angular not executing Jquery script in included HTML files

How come my MySQL date is decreasing by one day when using JavaScript?

What is the best way to show a message on a webpage after a user inputs a value into a textbox using

What is the method for obtaining the angle in a CSS3 rotate transformation?

Incorporating a Streamlit Application into an Established React.js Project via an iFrame

Library for creating custom password input fields with a text type

My attempt to incorporate an ajax loading gif into my website has been met with technical difficulties and is currently not functioning as

Selenium navigating an unordered list without returning the expected text

Error: The Mui Material Breakpoints Theme Cannot Be Located

Expanding the functionality of Promise to include progress updates

Creating a responsive database using an Express application and Socket.IO

Activating the submit button only following confirmation that the image dimensions have been verified

A guide on designing a personalized search bar for MUI-Datatables with a sleek outlined style

React is still unable to display images when looping, despite the use of the "require"

Utilizing doT.js for Organizing Nested Lists from Arrays and Objects

sudden swivel when shifting camera while following an object on a flat surface/pathway

A guide on utilizing the javascript function to toggle the checkbox in each row of a gridview

React Braces Dilemma

Having trouble with my jQuery code not functioning as expected