इतिहास API - स्क्रोल बहाल करें

अपने यूआरएल मैनेज करने के लिए, History API का इस्तेमाल करना बहुत अच्छा है. यह अच्छे वेब ऐप्लिकेशन की एक अहम सुविधा है. हालांकि, इसकी एक समस्या यह है कि स्क्रोल की गई जगहें सेव हो जाती हैं. इसके बाद, जब भी इतिहास में वापस जाया जाता है, तो वे वापस ला दी जाती हैं. इसका मतलब है कि स्क्रोल की पोज़िशन अपने-आप बदलने पर, पेज पर अचानक से ऊपर या नीचे जाने जैसी समस्याएं आ सकती हैं. ऐसा खास तौर पर तब होता है, जब आपका ऐप्लिकेशन ट्रांज़िशन करता है या पेज के कॉन्टेंट में किसी भी तरह का बदलाव करता है. आखिरकार, इससे उपयोगकर्ताओं को खराब अनुभव मिलता है.

इस मामले में आपके पास बहुत कम विकल्प हैं: Chrome, scroll इवेंट से पहले popState इवेंट को ट्रिगर करता है. इसका मतलब है कि popState में मौजूदा स्क्रोल पोज़िशन को पढ़ा जा सकता है और फिर window.scrollTo की मदद से, scroll इवेंट हैंडलर में इसे उलटाया जा सकता है (यह तरीका थोड़ा खराब है, लेकिन कम से कम काम करता है!). हालांकि, Firefox popState से पहले scroll इवेंट को ट्रिगर करता है. इसलिए, आपको यह पता नहीं चलता कि स्क्रोल की पुरानी वैल्यू क्या थी, ताकि उसे वापस लाया जा सके. बा!

हालांकि, अच्छी बात यह है कि इस समस्या को ठीक किया जा सकता है: history.scrollRestoration. इसमें दो स्ट्रिंग वैल्यू होती हैं: auto, जो सब कुछ पहले जैसा रखती है (और यह इसकी डिफ़ॉल्ट वैल्यू होती है) और manual. इसका मतलब है कि जब कोई उपयोगकर्ता ऐप्लिकेशन के इतिहास को देखेगा, तो डेवलपर के तौर पर आपको स्क्रोल में होने वाले उन सभी बदलावों का मालिकाना हक लेना होगा जो ज़रूरी हो सकते हैं. ज़रूरत पड़ने पर, history.pushState() का इस्तेमाल करके इतिहास की एंट्री को पुश करते समय, स्क्रोल की पोज़िशन पर नज़र रखी जा सकती है.

यह सुविधा नई और एक्सपेरिमेंट के तौर पर उपलब्ध है. हालांकि, यह सुविधा बहुत ही शानदार है. इसलिए, इसका इस्तेमाल करने से पहले, पक्का करें कि यह आपके लिए उपलब्ध है या नहीं:

if ('scrollRestoration' in history) {
    // Back off, browser, I got this...
    history.scrollRestoration = 'manual';
}

आपको history.scrollRestoration, Chrome 46 और उसके बाद के वर्शन में दिखेगा. साथ ही, इसकी खास जानकारी यहां देखी जा सकती है.

हमें सुझाव/राय देना न भूलें. साथ ही, अगर आपको अन्य वेंडर से भी scrollRestoration के लिए सहायता चाहिए, तो उन्हें भी बताएं.