प्रतिक्रिया रूटर स्पा के लिए स्क्रॉल बहाली कैसे लागू करें

Question

मैं एक रिएक्ट सिंगल-पेज एप्लिकेशन बना रहा हूं, और मैंने देखा है कि स्क्रॉल बहाली क्रोम (और शायद ब्राउज़र) में अपेक्षित रूप से काम नहीं करती है।

प्रतिक्रिया-राउटर-डोम गिथब रेपो पर, उनके पास एक पृष्ठ होता है जो कहता है कि ब्राउज़र मूल रूप से सिंगल पेज ऐप्स के लिए स्क्रॉल करना शुरू कर रहे हैं , और व्यवहार एक पारंपरिक गैर-एसपीए वेब पेज के समान होगा, यदि history.scrollRestorationइसे सेट किया गया है auto।

उस पृष्ठ पर मेरे द्वारा बताए गए व्यवहार को इंगित किया गया है:

1. नेविगेशन पर स्क्रॉल करना ताकि आप नीचे तक स्क्रॉल की गई नई स्क्रीन शुरू न करें।
2. विंडो के स्क्रॉल पदों को पुनर्स्थापित करना और "बैक" और "फॉरवर्ड" क्लिक पर तत्वों को ओवरफ़्लो करें (लेकिन लिंक क्लिक नहीं!)

लेकिन मुझे उन मार्गों के लिए व्यवहार को अक्षम करना होगा जिनमें टैब या हिंडोला शामिल हैं।

इस मुद्दे पर क्रोम की युक्ति का लिंक यहां दिया गया है ।

OS X के लिए Chrome संस्करण 78.0.3904.97 (आधिकारिक बिल्ड) (64-बिट) में मैं जो देख रहा हूं, वह वही है जो मैं history.scrollRestoration manualसेटिंग से उम्मीद करता हूं । यही है, जब मुझे पृष्ठ के आधे रास्ते पर स्क्रॉल किया जाता है, और मैं एक लिंक पर क्लिक करता हूं, तो अगले पृष्ठ को पृष्ठ के आधे हिस्से तक स्क्रॉल किया जाता है, पिछले पृष्ठ के समान बिंदु पर।

मैंने history.scrollRestorationविभिन्न बिंदुओं पर जांच की है और पाया है कि यह शुरू होता है और autoडिफ़ॉल्ट रहता है ,

यहाँ महत्व का एक बिंदु @ ट्रेवररॉबिनसन के उत्तर से है "स्क्रॉल बहाली में ब्राउज़र के स्वचालित प्रयास ... ... ज्यादातर एकल-पृष्ठ ऐप्स के लिए काम नहीं करते हैं ..." ठीक है ... मुझे इसके लिए लगातार समर्थन मिला history.scrollRestoration, लेकिन जाहिरा तौर पर ब्राउज़र्स वास्तव में स्क्रॉल पुनर्स्थापना करते हुए भद्दे हैं। फिर उस पर यहाँ ध्यान दिया जाना चाहिए , जिसने आज मेरा समय बचाया है।

तब मैं इसे मैन्युअल रूप से करने के तरीके देखता हूं, और मैं आगे बढ़ने के तरीके के बारे में स्पष्ट नहीं हूं। react-router-scrollकहते हैं कि यह रिएक्टर राउटर v4 के साथ संगत नहीं है, लेकिन यह v5 का उल्लेख नहीं करता है, जो इस प्रश्न के रूप में वर्तमान है। तो क्या मुझे यह मान लेना चाहिए कि v5 भी संगत नहीं है?

तो मैं आगे के लिए एक तरह से आगे देखता हूं, और इस एसओ का जवाब मिला कि रिएक्टर राउटर v4 के साथ स्क्रॉल बहाली को कैसे संभालना चाहिए ... क्या मुझे यह मान लेना चाहिए कि रिएक्ट राउटर v5 के साथ काम करेगा ? अद्यतन: यह v5 में मेरे लिए काम नहीं करता है। मैंने कई विन्यास की कोशिश की।मैं भी इसे पूरी तरह से प्रतिक्रिया रूटर v4 के साथ काम नहीं कर सका। मुझे पता था कि यह कम से कम जीवित है, क्योंकि यह एक नए पृष्ठ पर शीर्ष पर स्क्रॉल था, लेकिन इतिहास में बहाली नहीं होती है।

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

मैंने ओफ़-प्रतिक्रिया-राउटर का उपयोग करने पर विचार किया , लेकिन यह कहता है कि कुछ मार्गों के लिए स्क्रॉल बहाली या स्क्रॉल-टू-टॉप को अक्षम करने के बारे में दस्तावेज में कुछ भी नहीं है।संपादित करें: यह वास्तव में इसे संभालता है, जैसा कि मेरे उत्तर में उल्लिखित है।

क्या कोई ऐसी चीज है जिसकी मैंने अनदेखी की है? इस समस्या से निपटने के लिए मानक क्या है, क्योंकि मैं केवल एक ही नहीं हो सकता, जिसे इस सुविधा की आवश्यकता है। ऐसा लगता है जैसे मैं कुछ नुकीला और प्रयोगात्मक कर रहा हूं, लेकिन मुझे अपनी साइट को एक सामान्य साइट की तरह स्क्रॉल करने की आवश्यकता है।

Comments

आपके पास एक नेक्स्टज का लुक होना चाहिए , उन्होंने इसे इतिहास को कैशिंग के माध्यम से लागू किया।

— ज्यूरियन

ठंडा! जब मैं इस परियोजना से नीचे आ सकता हूं, तो मैं एक करीब देखूंगा।

— बीबीसिंगर

Answer 1

ऐसा करने का एक तरीका ओफ-रिएक्शन-राउटर के साथ है । shouldHandleActionसेटिंग्स में विकल्पों का उपयोग करें । फंक्शन पास हो जाता है previousLocationऔरnextLocation जिसे आप यह निर्धारित करने के लिए उपयोग कर सकते हैं कि स्क्रॉल को रीसेट / पुनर्स्थापित किया जाना चाहिए, और falseयदि नहीं तो वापस लौटाएं ।

const history = createBrowserHistory();

const settings = {
   shouldHandleAction: (previousLocation, nextLocation) => {
       // Inspect/compare nextLocation and/or previousLocation.
       return false // false if you don't want scroll restoration.
   }
};

wrapHistory(history, settings);

oaf-react- राउटर React Router v4 और v5 के साथ काम करता है, और एक्सेसिबिलिटी को हैंडल करता है, जहां कई एसपीए राउटर नहीं करते हैं, इसलिए यह इस समय का सबसे पूर्ण समाधान हो सकता है।

उत्सुकता से, प्रलेखन इस सुविधा पर विस्तृत नहीं है।

यदि किसी और के पास एक समाधान है जो काम करता है और इसे एक मानक के रूप में माना जाएगा, तो कृपया यहां इसके साथ एक उत्तर प्रदान करें, और मैं चयनित उत्तर को बदलने पर विचार करूंगा।