Are you ready?
1 questions to solve.
Instructions
- This quiz goes to full-screen once you press the Start button.
- At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.
How do we create a new intersection observer object?
An intersection observer is created by calling the constructor
IntersectionObserver()
i.e using the statement new IntersectionObserver()
.What is the first argument to the
IntersectionObserver()
constructor?The first argument to
IntersectionObserver()
is a function, known as the callback
.What does the
null
value for the root
property shown below mean?function callback() {
console.log("OK");
}
var options = {
root: null
}
var io = new Intersection(callback, options);
A
null
value for the root
property of the options
object means that the root is the viewport. For more info, consider reading IntersectionObserver Basics.What is the default value for the
threshold
property of the options
argument?The default value for the
threshold
property of the options
object is the array [0]
. See details at IntersectionObserver Basics.The
IntersectionObserver
API observes all given targets asynchronously. True or false?Definitely true! This is where the strength and efficiency of the
IntersectionObserver
API comes from. Read more at IntersectionObserver Introduction.What does an
intersectionRatio
of 1
mean?intersectionRatio
is a number between 0
and 1
(both inclusive) to indicate the proportion of the target visible in the root. 1
means that it is completely visible - which goes with choice (C).The
entries
parameter of an observer's callback function belongs to which data class?entries
is an array; likewise it belongs to the class Array
. Read more at IntersectionObserver Basics.When will the following code make a log, supposing that the observer
io
is observing only one element?function callback(entries) {
var entry = entries[0];
if (entry.isIntersecting && entry.intersectionRatio === 0) {
console.log("OK");
}
}
var io = new Intersection(callback);
This example is detailed in IntersectionObserver Entries.
In the code shown below, what will line 2 log whenever the callback is fired?
function callback(entries, x) {
console.log(x instanceOf IntersectionObserver);
}
var io = new Intersection(callback);
The second argument of the callback function is a reference to the observer object (
io
in this case). Since the argument is an intersection observer, it indirectly means that it's an instance of IntersectionObserver
. Hence line 2 logs true
. Read more at IntersectionObserver Entries.Below shown are two variants of a callback function to be passed to an
IntersectionObserver()
constructor. The goal is to make a log once a given target is completely visible in the root.Variant 1:
function callback(entries) {
entries.forEach(function(entry) {
if (entry.intersectionRatio === 1) {
console.log("OK")
}
});
}
Variant 2:
function callback(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
console.log("OK")
}
});
}
Which variant do you think is more reliable and cross-browser compatible in accomplishing this goal?
As discussed in IntersectionObserver Entries, the property
isIntersecting
isn't the best deal to go with if we want to check whether a target is completely visible in the root. A better and more reliable option is to directly check intersectionRatio
as is done in Variant 1.Which of the following are properties of an
IntersectionObserverEntry
object?The first three options are all properties of an
IntersectionObserverEntry
object. This goes with choice (D). For more info please refer to IntersectionObserver Entries.