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

पॉल लुइस

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

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

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

यह सुविधा नई है और प्रयोग के तौर पर शुरू की गई है (हालांकि बहुत बढ़िया है). इसलिए, इसका इस्तेमाल करने से पहले यह पक्का कर लें कि यह उपलब्ध है या नहीं:

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

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

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