Last Visible Li on screen

Question

Hi I have a list of Li elements with overflow hidden, I just want to find the last visible Li on screen let say a element which is closest to right

Uday Dodiya · Answer

Another Solution Here's one way you could do this using JavaScript: Get the li elements that are visible on the screen by using the getClientRects method on each element. This method returns a list of rectangles that represent the element's size and position relative to the viewport. Iterate through the list of visible li elements and find the one that is closest to the right edge of the viewport. You can do this by comparing the right property of each element's rectangle to the width of the viewport. The element with the highest right value is the one that is closest to the right edge. Here's some example code that demonstrates how this could work: const liElements = document.querySelectorAll('li'); // Find the last visible li element let lastVisibleLi; let maxRight = 0; for (const li of liElements) { const rect = li.getClientRects()[0]; if (rect.right > maxRight) { maxRight = rect.right; lastVisibleLi = li; } } console.log(lastVisibleLi); // The last visible li element This code will find the last visible li element by iterating through all of the li elements and keeping track of the one with the highest right value.

Uday Dodiya · Answer

Answer By ChatGPT You can use JavaScript to determine the visibility of each li element and then find the one that is closest to the right edge of the screen. Here's an example of how you might do this: var listItems = document.querySelectorAll('li'); var lastVisibleItem; var minDistance = Infinity; for (var i = 0; i 0 && rect.left This code iterates through all of the li elements, checks to see if they are visible on the screen (based on their bounding rectangle), and then finds the one that is closest to the right edge of the screen.

Last Visible Li on screen

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (2)