2017-07-07 8 views
7

प्रतिक्रिया-राउटर का उपयोग करते समय मुझे बैक बटन (इतिहास पॉपस्टेट) पर स्क्रॉल पोजिशन के साथ कुछ समस्याएं आ रही हैं। प्रतिक्रिया राउटर v4 बॉक्स के बाहर स्क्रॉल प्रबंधन को संभाल नहीं करता है क्योंकि ब्राउज़र कुछ स्वचालित स्क्रॉल व्यवहार को कार्यान्वित कर रहे हैं। यह बहुत अच्छा है जब ब्राउज़र विंडो की ऊंचाई एक दृश्य से दूसरे दृश्य में नाटकीय रूप से बदल जाती है। मैंने यहां वर्णित स्क्रॉलटॉप घटक को कार्यान्वित किया है: https://reacttraining.com/react-router/web/guides/scroll-restorationलोग प्रतिक्रिया-राउटर v4 के साथ स्क्रॉल बहाली कैसे संभालते हैं?

यह बहुत अच्छा काम करता है। जब आप किसी लिंक पर क्लिक करते हैं और किसी भिन्न घटक पर जाते हैं, तो ब्राउज़र शीर्ष पर स्क्रॉल करता है (सामान्य सर्वर-रेंडर वेबसाइट की तरह)। समस्या तब होती है जब आप वापस लम्बी खिड़की की ऊंचाई के साथ एक दृश्य में (ब्राउज़र बैक बटन के माध्यम से) वापस जाते हैं। ऐसा लगता है कि (क्रोम) सामग्री (और ब्राउज़र की ऊंचाई) प्रस्तुत करने से पहले पिछले पृष्ठ की स्क्रॉल स्थिति पर जाने का प्रयास करता है। इसके परिणामस्वरूप केवल स्क्रॉल में ही नीचे जा रहा है क्योंकि यह उस दृश्य की ऊंचाई पर आधारित हो सकता है, जो यह आ रहा है। इस परिदृश्य को चित्रित करें:

देखें 1: फिल्मों की लंबी सूची (विंडो ऊंचाई 3500px)।
(फिल्म क्लिक किया जाता है)
View2: विवरण चयनित फिल्म के देखने (खिड़की ऊंचाई: 1000px)।
(ब्राउज़र वापस बटन क्लिक किया जाता है)
वापस 1 देखने पर है, लेकिन स्क्रॉल स्थिति 1000px से आगे नहीं जा सकते, क्योंकि क्रोम से पहले स्थिति निर्धारित करने के प्रयास कर रहा है प्रतिक्रिया लंबे फिल्म सूची बना देता है।

किसी कारण से यह क्रोम में केवल एक समस्या है। फ़ायरफ़ॉक्स और सफारी इसे ठीक से संभालने लगते हैं। मुझे आश्चर्य है कि किसी और को यह समस्या है, और आप आम तौर पर रिएक्ट में स्क्रॉल बहाली को कैसे संभालेंगे।

नोट: सभी फिल्में नमूनाMovies.js से आयात की जाती हैं - इसलिए मैं अपने उदाहरण में एपीआई प्रतिक्रिया की प्रतीक्षा नहीं कर रहा हूं।

+0

अरे, क्या आपने समस्या हल की है? मुझे बिल्कुल एक ही समस्या का सामना करना पड़ रहा है –

उत्तर

1

आप अपनी स्क्रॉल बहाली को कैसे संभालेंगे?

ब्राउज़र को इतिहास.scrollRestoration के कार्यान्वयन को चालू करता है।

शायद आप इसका उपयोग कर सकते हैं? इन लिंक को देखें।

https://developer.mozilla.org/en/docs/Web/API/History#Specifications https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration

इसके अलावा, मैं एक NPM मॉड्यूल है कि बहाली स्क्रॉल में आसानी के साथ प्रतिक्रिया को संभालने के लिए सक्षम हो सकता है पाया है, लेकिन इस पुस्तकालय केवल रूटर v3 प्रतिक्रिया के साथ और नीचे काम करता है

https://www.npmjs.com/package/react-router-restore-scroll https://github.com/ryanflorence/react-router-restore-scroll

मुझे आशा है कि इससे मदद मिल सकती है।

संबंधित मुद्दे