I want to select the first element in the screen or window regardless of vertical scrolling position
It doesn’t matter to me what element it is and it also doesn’t matter in what scrolling position I am (highest, lowest or somewhere in between), I just want to select the first element appearing from all elements appearing in the screen/window in a given scrolling position (or fold, if there is no scroll bar).
So what is an element for you? A text, a link, a span, a div?
Yes, indeed, any HTML element that is.
Hi @bendqh1, you can use getBoundingClientRect() to get an element’s position relative to the viewport, and the array find() method to get the first matching element (if any):
const elementsToTest = document.querySelectorAll('div')
const firstInViewport = Array.from(elementsToTest).find(element => {
const { top, bottom } = element.getBoundingClientRect()
return bottom > 0 && top < window.innerHeight
})
console.log(firstInViewport) // matched element or undefined
Thanks a lot.
I replaced div to h2 and tried to run this on a Drupal website with very complex (yet well organized) markup and got surprising results, especially when logged in and a Drupal admin-menu is floating on the top of the viewport.
I basically just want to “record” the frist h2 so if a user goes to edit mode (from the regular usage of the site or “reading mode”), by some keyboard combo, than he will be transferred automatically to that heading in the WYSIWYG CKeditor.
Hm I don’t have a Drupal instance at hand, but maybe you just need a more specific selector then? An element inside a fixed or sticky header will always satisfy the test, so you’d need to query something like "main h2" (say) instead of just "h2".
BTW also note that with the above snippet you’ll get the first visible element as it appears in the document, which is not necessarily the topmost element in the viewport. If you need the latter, then you might reduce() the queried elements to the one with the smallest bottom > 0.
I think that what you have shown is what I need only with selecting the size because most of my “primary” h2’s are more than 20px-30px in size.
if (document.querySelector('h2').element.style.fontSize >= 25px) {}
And you’re sure there’s no common class or ancestor element that you can use to identify these? oO Anyway, checking the style property like this will only work for styles set directly on the element (either using JS or a style attribute in the markup), not global / inherited CSS. To get the actual font size, use window.getComputedStyle():
const fontSize = window
.getComputedStyle(element)
.getPropertyValue('font-size')
if (parseFloat(fontSize) >= 25) {
// ...
}
(And parse the value as float for comparison!)
Thanks a lot !
These h2 elements are mostly classless, created “on the fly” with the WYSIWYG CKeditor (native to Drupal).
Glad I could help. :-)
@m3g4p0p with my current level of JavaScript I can’t understand all the following.
const { top, bottom } = element.getBoundingClientRect()
return bottom > 0 && top < window.innerHeight
I know that return stops a procedure and outputs a value, or, causes the procedure to stop and output a value (I don’t know which phrasing is more accurate).
But, besides that I misunderstand what is const { top, bottom }. Is this what’s called a “variable compound”? (over the years I came across many definitions of the term “variable compound” and I don’t know which is true).
Anyway, is there perhaps a slightly simpler code or even longer but more “abstract” or more “human-language” code than in this example?
Ah that’s called a destructuring assignment… written out it would just look like this:
const rect = element.getBoundingClientRect()
return rect.bottom > 0 && rect.top < window.innerHeight
So using destructing assignment you’d not assign the object itself to a variable, but the given object properties to variables of the same name. It’s just syntactic sugar though, you don’t have to use it.
Well, I’d say it just returns a value from the function. ^^ The function is indeed finished at this point, so following code would not get executed. In this case, the return value is a boolean indicating if the current element is inside the viewport, which again tells find() to return that element and stop iteration (see the link from my earlier reply for details).
I still have a bit of a hard time understanding it 
I wish that the method was named boundOneOrMoreClientRectangle(); which is far clearer to me, although even then I would wonder, why only rectangles? Why not other shapes?
I also avoid using return because in all my years of elementary JavaScript I never had any case where it was obligatory to use it. Is it obligatory here?
Can this be also somewhat simplified?
const fontSize = window
.getComputedStyle(element)
.getPropertyValue('font-size')
if (parseFloat(fontSize) >= 25) {
const elementsToTest = document.querySelectorAll('h2')
const firstInViewport = Array.from(elementsToTest).find(element => {
const rect = element.getBoundingClientRect()
return rect.bottom > 0 && rect.top < window.innerHeigh
});
};
This code brings back
VM76:2 Uncaught ReferenceError: element is not defined
at :2:21
Why one or more? It does return a single bounding client rectangle when called… as for the shape, I suppose a box just makes most sense in a rectangular screen where all elements are rectangular too (x and y position + width and height). How would you even define a bounding client triangle, say? Again just check out the links, it’s really well explained here:
Returning values from functions is fundamental concept not only in JS but most programming languages in general. You should really have a look at this, here’s another MDN link:
I guess you might rewrite your code to completely avoid using return statements (e.g. using global variables instead), but that would be more of an esoteric exercise really. ^^
Ah yes this code was supposed to be used inside the find() callback as part of the test for each element, not outside of it:
const elementsToTest = document.querySelectorAll('h2')
const firstInViewport = Array.from(elementsToTest).find(element => {
const rect = element.getBoundingClientRect()
const fontSize = window
.getComputedStyle(element)
.getPropertyValue('font-size')
return (
rect.bottom > 0 &&
rect.top < window.innerHeight &&
parseFloat(fontSize) > 25
)
})
console.log(firstInViewport)
Or refactored to its own function for a better code structure:
function getComputedFontSize (element) {
const fontSize = window
.getComputedStyle(element)
.getPropertyValue('font-size')
return parseFloat(fontSize)
}
const elementsToTest = document.querySelectorAll('h2')
const firstInViewport = Array.from(elementsToTest).find(element => {
const rect = element.getBoundingClientRect()
const fontSize = getComputedFontSize(element)
return (
rect.bottom > 0 &&
rect.top < window.innerHeight &&
fontSize > 25
)
})
console.log(firstInViewport)
PS: Okay here’s the equivalent code using a for loop instead if you really want to avoid returning values from functions… ¯\_(ツ)_/¯
const elementsToTest = document.querySelectorAll('h2')
let firstInViewport
for (const element of elementsToTest) {
const rect = element.getBoundingClientRect()
const fontSize = window
.getComputedStyle(element)
.getPropertyValue('font-size')
if (
rect.bottom > 0 &&
rect.top < window.innerHeight &&
parseFloat(fontSize) > 25
) {
firstInViewport = element
break
}
}
console.log(firstInViewport)
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.