JS का ResizeObserver
In this page:
const observer = new ResizeObserver(entries => {
// entry.contentRect
});
observer.observe(element);ResizeObserver क्या है?
ResizeObserver किसी element को देखता है और उसका size बदलने पर रिपोर्ट करता है। यह window के resize event को सुनने से ज़्यादा कुशल और सटीक है, क्योंकि यह किसी खास element के box में बदलाव रिपोर्ट करता है, सिर्फ overall viewport में नहीं।
उदाहरण: What Is ResizeObserver?
<div id="box" style="width: 200px;">Resize me</div>
<script>
// Declare the constant `observer` as a new `ResizeObserver` instance
const observer = new ResizeObserver(() => console.log("Size changed"));
// Call `observer.observe(document.getElementById("box"))`
observer.observe(document.getElementById("box"));
</script>नया Size पढ़ना
contentRect property observed element के content box का size देती है। यह आपको layout के बाद के असली rendered dimensions देती है, जो हर संभावित resize trigger के बाद manually offsetWidth/offsetHeight पढ़ने से ज़्यादा भरोसेमंद है।
उदाहरण: Reading the New Size
<div id="box">Box</div>
<script>
// Declare the constant `observer` as a new `ResizeObserver` instance
const observer = new ResizeObserver((entries) => {
// Print `entries[0].contentRect.width, entries[0].contentRect.height` to the console
console.log(entries[0].contentRect.width, entries[0].contentRect.height);
});
// Call `observer.observe(document.getElementById("box"))`
observer.observe(document.getElementById("box"));
</script>Size Changes पर Respond करना
जब element बड़ा हो जाए या छोटा हो जाए तो आप styles बदल सकते हैं। यह responsive components बनाना संभव बनाता है जो अपने container के size के आधार पर अपना layout adapt करते हैं, सिर्फ overall window size पर नहीं।
उदाहरण: Responding to Size Changes
<div id="box">Box</div>
<script>
// Declare the constant `observer` as a new `ResizeObserver` instance
const observer = new ResizeObserver((entries) => {
document.getElementById("box").style.background = entries[0].contentRect.width < 100 ? "red" : "green";
});
// Call `observer.observe(document.getElementById("box"))`
observer.observe(document.getElementById("box"));
</script>कई Elements Observe करना
एक ResizeObserver कई elements देख सकता है। callback को बदले गए elements के लिए entries मिलती हैं।
यह आपको एक observer से कई elements के लिए responsive component logic लागू करने देता है — जैसे किसी खास container के किसी size से नीचे सिकुड़ने पर ही एक compact layout दिखाना।
उदाहरण: Observing Multiple Elements
<div id="a">A</div>
<div id="b">B</div>
<script>
// Declare the constant `observer` as a new `ResizeObserver` instance
const observer = new ResizeObserver((entries) => {
// Call `entries.forEach(entry => console.log(entry.target.id, "resized"))`
entries.forEach(entry => console.log(entry.target.id, "resized"));
});
// Call `observer.observe(document.getElementById("a"))`
observer.observe(document.getElementById("a"));
// Call `observer.observe(document.getElementById("b"))`
observer.observe(document.getElementById("b"));
</script>Observation रोकना
एक element के लिए unobserve इस्तेमाल करें या observer की ज़रूरत न रहने पर disconnect। बाकी DOM observers की तरह, जिन elements को track करने की ज़रूरत नहीं उन्हें disconnect या unobserve करना page को अनावश्यक background काम करने से रोकता है।
उदाहरण: Stopping Observation
<div id="box">Box</div>
<script>
const observer = new ResizeObserver(() => console.log("resized"));
const el = document.getElementById("box");
observer.observe(el);
observer.unobserve(el); // stop watching
</script>- callback के अंदर element का size ऐसे बदलना कि यह दोबारा trigger हो जाए, जो एक "ResizeObserver loop" error देता है।
observe(element)कॉल करना भूल जाना, इसलिए कुछ नहीं होता।- यह मान लेना कि यह window resizing report करता है, जबकि यह observed elements के size changes report करता है, viewport के नहीं।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: