Determining if an item is located within a nested scroll container

How can one detect if a specific element within a scrollable container is currently visible to the user's view (i.e. within the visible area of the scrolling parent)?

Is there a universal method available that does not require iterating through all parent nodes with scroll functionality?

P.S. One possible solution could involve using `getElementAtPoint`, although this approach becomes complex when trying to determine if at least half of the element is visible. Ideally, the solution would incorporate collision detection between the element's rectangle and the viewport.

P.P.S. Another suggestion is to utilize `scrollIntoView` on the targeted element, calculate the positional difference, and then return it to its original position. It seems that `scrollIntoView` consistently manages both the window and inner scrollable elements effectively!

javascriptdomgetboundingclientrect

Answer №1

It appears that achieving this task without iteration is quite challenging, especially when considering cross-browser compatibility. However, with some straightforward code, it can be accomplished.

An illustration of how this can be achieved in Internet Explorer is provided below. Unfortunately, other browsers may yield varying results when utilizing 

body/html.getBoundingClientRect()
. Furthermore, the treatment of margins differs across browsers (IE disregards them while others take them into consideration).

getVisibilityPercent = function () {
    var target = document.getElementById('target'),
        height = target.offsetHeight,
        parent = target.parentElement,
        targetRect = target.getBoundingClientRect(),
        tLim, bLim,
        percent = 1;
    while (parent) {
        parentRect = parent.getBoundingClientRect();
        tLim = Math.max(targetRect.top, parentRect.top); 
        bLim = Math.min(targetRect.bottom, parentRect.bottom);
        percent *= (bLim - tLim) / height;
        percent = (percent < 0) ? 0 : percent;
        parent = parent.parentElement;
    }
    return +((percent * 100).toFixed(2));
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Triggering jQuery Submit Form when Form is Modified

I need help with automatically submitting a form using jQuery when an input changes. The specific input I am working with is a date picker, and I want the form to be submitted as soon as a user makes a selection. <form id="select_date" name="select_da ...

javascriptjquery

Modifying css background in real-time based on the current weather conditions

Is there a way to dynamically change the background image in CSS based on the weather condition? I'm utilizing the wunderground API to retrieve the weather data, which is stored in the weather variable. I am struggling with how to update the backgrou ...

javascripthtmlcssreactjs

How can a PrivateRoute component effectively handle waiting for an asynchronous response?

I've encountered an issue with my PrivateRoute component that is supposed to verify the validity of a token. The problem lies in the fact that the validation process for rendering a view is not functioning as expected, always rendering: App.js const ...

javascriptreactjs

Determining Velocity of an Object in Three.js

Can anyone help me figure out how to calculate an object's velocity in three.js? I've checked the Object3D documentation but can't seem to find anything related to velocity. Appreciate any assistance, ...

javascriptthree.js

Instructions for developing an HTML element slider using mouse dragging

I've come across plenty of slider plugins that either only allow clicking to view the next image, or if they do support mouse drag or touch capabilities, they are limited to images. Does anyone know of a plugin or method to create a mouse drag slider ...

javascriptjqueryhtmlcssweb-applications

I'm encountering an issue with my API Key being undefined, despite having it saved in both an .env file and as a global variable

While attempting to retrieve information from an API, I encountered an issue where the key I was using was labeled as "undefined". However, after manually replacing {key=undefined} with the correct string in the network console, I was able to successfull ...

javascriptreactjs

Creating a JSFiddle with sprites using source and image files from Github with THREE.JS - a step-by-step guide

Greetings! I am currently working on creating a JSFiddle based on the official THREE.js HUD Sprites example. However, I am facing an issue where the sprite images do not seem to load or apply using the URLs specified in the original file:- //... URL' ...

javascripthtmlimagethree.js

Retrieve the file path of the local system's home directory from the server

The server is up and running, I am looking to retrieve the file path of the local system in which the AWS server is operating using Node.js. ...

javascriptnode.jsserver

PHP script integration with WHMCS

I've been attempting to add analytic.php into head.tpl in WHMCS, but I keep encountering an error. Analytic.php location: root/analytic.php Head.tpl location: root/whmcs/template/six/includes/head.tpl I read that WHMCS supports Smarty PHP, so I&apos ...

javascriptphphtmlsmartywhmcs

Interactive hover effect in JavaScript displays a larger version of other thumbnails when hovering over a dynamically loaded thumbnail image, instead of its own full-size image

I recently began teaching myself PHP and Dreamweaver with the help of a video tutorial on building data-driven websites using Dreamweaver. My goal is to create a dynamic table with 6 columns and 20 rows. column1 | column2 | column3 | colu ...

phphtmlcssjavascriptmysql

Retrieving text from Node.js with the help of regular expressions

I need to extract testcase ids from a list of testcases with titles. Each title includes an id and a description. I want to extract only the id. Here are some examples: TC-ABC-98.1.010_1-Verify the layout credit page TC-RegPMP-1.1.001_2-Verify the [MangerD ...

javascriptnode.jsregex

Learn the process of eliminating special characters from input or textarea fields with AngularJs!

My attempts to integrate an AngularJS directive to remove special characters from input and textarea fields have been unsuccessful. Despite no errors being reported in the console, I am facing issues with the character count tooltip not displaying numbers ...

javascripthtmlangularjs

What results can be expected from a piped file stream?

Perhaps the wording of the question may not be perfect, but here is some additional context. With GridFSBucket, I am able to store a file in MongoDB and retrieve a download stream for that file. Here's my query: If I wanted to send that file back as a ...

javascriptajaxnode.jsmongodbexpress

Leveraging jQuery.ajaxSetup for customizing beforeSend function and modifying outgoing data for AJAX requests

My goal is to develop a universal beforeSend function that modifies the data sent by each jQuery.ajax call. This will allow me to include a custom variable for tracking purposes in every request, regardless of the order they are sent in. For instance, let ...

javascriptjqueryajax

What is the correct way to extract results from an Array of Objects in Typescript after parsing a JSON string into a JSON object? I need help troubleshooting my code

Here is my code for extracting data from an array of objects after converting it from a JSON string to a JSON object. export class FourColumnResults { constructor(private column1: string, private column2: string, private column3: string, priv ...

javascriptarraysjsontypescript

Broaden the reach of the ajax .done function to encompass the surrounding function

It seems like my previous attempts to find a solution for the function below were unsuccessful: function countNoFilters(keyword){ keyword = typeof keyword !== 'undefined' ? keyword : "keyword="+$("#keyword-hidden").val(); var getR ...

javascriptajaxscopereturn

Deleting outdated files in a temporary uploads directory - NodeJS best practices

My process for removing old files from a tmp upload directory involves the code below: fs.readdir( dirPath, function( err, files ) { if ( err ) return console.log( err ); if (files.length > 0) { files.forEach(function( file ) { ...

javascriptnode.js

Ways to identify when a browser has disabled JavaScript and present a notification

Is there a way to detect if JavaScript is disabled in the browser and show an error div instead of the body? ...

javascriptjqueryhtmlnoscript

JavaScript validation controls do not function properly when enabled on the client side

Following the requirements, I have disabled all validation controls on the page during the PageLoad event on the server side. When the submit button is clicked, I want to activate the validations and check if the page is valid for submission. If not, then ...

asp.netjavascriptasp.net-2.0

Navigating through segments of an array in javascript

Within my condensed array, I have omitted most of the input data to demonstrate a particular task. For illustrative purposes, here is an extensive example showcasing the elements: storyArray=["#C1", "String showing first message", "String displaying secon ...

javascriptjqueryarraysloops