Preface
In modern front-end development, it is crucial to understand the visibility of page elements. For example, we might want to load more content when the user scrolls to a specific section, or trigger an animation when an element enters the viewport. Although there is no direct API for listening for element visibility, we can cleverly use JavaScript's Intersection Observer API in combination with Vue's custom directives to achieve this functionality.
This article will provide a detailed introduction to how to monitor the visibility of elements in a Vue project using this method, and explore some advanced usage and optimization techniques.
What is Intersection Observer
Intersection Observer is a browser native API that is used to asynchronously observe the cross-state changes between the target element and its ancestor element or the top viewport. Simply put, it can tell you when an element enters or leaves the viewport.
Implementation steps
- Create custom directives
- Using Intersection Observer
- Use custom directives in Vue components
1. Create custom directives
First, we need to create a Vue custom directive that is bound to the element we want to listen on. This directive uses Intersection Observer to detect the visibility of elements.
// src/directives/
export default {
inserted(el, binding) {
const options = {
root: null, // Use viewport as root threshold: 0.1 // Trigger callback when at least 10% of the elements are in the viewport };
const observer = new IntersectionObserver((entries, observer) => {
(entry => {
if () {
(true); // When the element is visible, the incoming callback function is called } else {
(false); // When the element is not visible, call the incoming callback function }
});
}, options);
(el);
}
};
2. Register custom commands
Next, we need to register this custom directive in the Vue app.
// src/
import Vue from 'vue';
import App from './';
import vVisible from './directives/v-visible';
('visible', vVisible);
new Vue({
render: h => h(App),
}).$mount('#app');
3. Use custom directives in Vue components
Now we can use this custom directive in any Vue component to listen for the visibility of elements. We will show how to use it with a simple example.
<template>
<div>
<div v-visible="handleVisibilityChange" class="box">
Observe if I'm in the viewport
</div>
</div>
</template>
<script>
export default {
methods: {
handleVisibilityChange(isVisible) {
if (isVisible) {
('Elements are visible! ');
} else {
('Elements are not visible! ');
}
}
}
};
</script>
<style>
.box {
margin-top: 100vh; /* Make sure that the element is initially invisible */
height: 100px;
background-color: lightblue;
}
</style>
Advanced usage
1. Configure optional parameters for custom directives
In practical applications, we may need to customize the behavior of the observer, such as setting different thresholds or root elements. We can pass these parameters through the bound values of the directive.
The modified custom commands are as follows:
// src/directives/
export default {
inserted(el, binding) {
const defaultOptions = {
root: null,
threshold: 0.1
};
const options = (defaultOptions, || {});
const observer = new IntersectionObserver((entries, observer) => {
(entry => {
if () {
(true);
} else {
(false);
}
});
}, options);
(el);
}
};
When used in a component, we can pass more parameters:
<template>
<div>
<div
v-visible="{
callback: handleVisibilityChange,
options: { threshold: 0.5 }
}"
class="box">
Observe if I'm in the viewport
</div>
</div>
</template>
<script>
export default {
methods: {
handleVisibilityChange(isVisible) {
if (isVisible) {
('Elements are visible! ');
} else {
('Elements are not visible! ');
}
}
}
};
</script>
2. Unbind the listener
To avoid memory leaks, we should cancel the listening when the element is unloaded. Vue provides an unbind hook where we can stop observing.
The complete custom commands are as follows:
// src/directives/
export default {
inserted(el, binding) {
const defaultOptions = {
root: null,
threshold: 0.1
};
const options = (defaultOptions, || {});
const observer = new IntersectionObserver((entries, observer) => {
(entry => {
if () {
(true);
} else {
(false);
}
});
}, options);
(el);
el._observer = observer; //Storing the observer instance on the element },
unbind(el) {
if (el._observer) {
el._observer.disconnect(); // Cancel the monitoring delete el._observer;
}
}
};
3. Support reuse
Sometimes we want the same callback function to be shared by multiple elements without creating a new function every time. We can further optimize the definition of instructions.
<template>
<div>
<div
v-visible="visibilityHandler"
class="box">
Observe if I'm in the viewport
</div>
<div
v-visible="visibilityHandler"
class="box">
Me too
</div>
</div>
</template>
<script>
export default {
methods: {
visibilityHandler(isVisible, el) {
if (isVisible) {
(`${el} Elements visible！`);
} else {
(`${el} Elements are not visible！`);
}
}
}
};
</script>
Modify the directive to support the callback passing element itself:
// src/directives/
export default {
inserted(el, binding) {
const defaultOptions = {
root: null,
threshold: 0.1
};
const options = (defaultOptions, || {});
const observer = new IntersectionObserver((entries, observer) => {
(entry => {
if () {
(true, el);
} else {
(false, el);
}
});
}, options);
(el);
el._observer = observer;
},
unbind(el) {
if (el._observer) {
el._observer.disconnect();
delete el._observer;
}
}
};
4. Handle complex scenarios
For more complex scenarios, such as the need to pause and resume observations in certain special cases, we can further enhance our instructions. For example, the operation of the observer can be dynamically controlled by a pause parameter.
// src/directives/
export default {
inserted(el, binding) {
const defaultOptions = {
root: null,
threshold: 0.1
};
const options = (defaultOptions, || {});
const observer = new IntersectionObserver((entries, observer) => {
(entry => {
if () {
(true, el);
} else {
(false, el);
}
});
}, options);
el._observer = observer;
if (!) {
(el);
}
},
update(el, binding) {
if ( && el._observer) {
el._observer.unobserve(el);
} else if (! && el._observer) {
el._observer.observe(el);
}
},
unbind(el) {
if (el._observer) {
el._observer.disconnect();
delete el._observer;
}
}
};
Dynamically control the observer in the component:
<template>
<div>
<div v-visible="{ callback: handleVisibilityChange, pause: isPaused }" class="box">
Observe if I'm in the viewport
</div>
<button @click="isPaused = !isPaused">
{{ isPaused ? 'Recover Observation' : 'Pause observation' }}
</button>
</div>
</template>
<script>
export default {
data() {
return {
isPaused: false
};
},
methods: {
handleVisibilityChange(isVisible, el) {
if (isVisible) {
('Elements are visible! ');
} else {
('Elements are not visible! ');
}
}
}
};
</script>
Summarize
Through the above examples and optimization techniques, we can see that Vue custom directives combined with Intersection Observer can achieve the function of monitoring element visibility very flexibly. This method is not only simple and easy to use, but also has excellent performance and is suitable for various complex scenarios.
The above is the detailed content of Vue using Intersection Observer to detect whether elements are displayed. For more information about Vue Intersection Observer, please follow my other related articles!