डेटा जोड़ने पर डिव के अंत तक स्वचालित रूप से स्क्रॉल कैसे करें

डायनामिक वेब सामग्री के साथ काम करते समय, डिव जैसे तत्वों को स्वचालित रूप से स्क्रॉल करना अक्सर वांछनीय होता है जैसे ही नया डेटा जोड़ा जाता है नीचे। चैट विंडो या अंतहीन स्क्रॉलिंग डेटा तालिकाओं जैसे तत्वों के लिए यह एक सामान्य आवश्यकता है।

ऐसे परिदृश्य पर विचार करें जहां आपके पास एक निश्चित ऊंचाई के साथ div के भीतर संलग्न एक तालिका है, और आप चाहते हैं कि यह अंत तक ऑटो-स्क्रॉल हो जब नया डेटा जोड़ा जाता है. यह आलेख इस व्यवहार को प्राप्त करने के लिए एक जावास्क्रिप्ट समाधान की खोज करता है।

जावास्क्रिप्ट दृष्टिकोण

एक अंतराल का उपयोग करना:

यदि डेटा जोड़ने का समय अज्ञात है, आप div की स्क्रॉलहाइट से मेल खाने के लिए उसकी स्क्रॉलटॉप प्रॉपर्टी को समय-समय पर अपडेट करने के लिए एक अंतराल सेट कर सकते हैं। यह सुनिश्चित करता है कि div हमेशा नीचे तक स्क्रॉल करेगा, भले ही अंतराल के बीच नया डेटा जोड़ा गया हो।

window.setInterval(function() {
  var elem = document.getElementById('data');
  elem.scrollTop = elem.scrollHeight;
}, 5000);

इस उदाहरण में, सेटइंटरवल फ़ंक्शन हर 5 सेकंड (5000 मिलीसेकंड) चलता है और div की स्क्रॉलटॉप प्रॉपर्टी को स्क्रॉलहाइट के साथ अपडेट करता है। यह प्रभावी रूप से div को अंत तक स्क्रॉल करता है। नया डेटा जोड़ने के बाद निम्नलिखित फ़ंक्शन को कॉल करके मैन्युअल रूप से व्यवहार करें:

function स्क्रॉलटूएंड(एलेम) { elem.scrollTop = elem.scrollHeight; }यह फ़ंक्शन एक तत्व को तर्क के रूप में लेता है और इसकी स्क्रॉलटॉप प्रॉपर्टी को इसकी स्क्रॉलहाइट पर सेट करता है, जो तत्व को नीचे तक स्क्रॉल करेगा। वांछित ऑटोस्क्रॉलिंग प्रभाव प्राप्त करने के लिए जब भी div में नया डेटा जोड़ा जाता है तो बस इस फ़ंक्शन को कॉल करें।