कैसे चिपचिपा स्क्रॉल साइडबार व्यवहार Facebook फ़ीड साइडबार के लिए इसी तरह के निर्माण के लिए

वोट
0

मुझे लगता है कि एक ऊर्ध्वाधर फ़ीड जो बहुत डेस्कटॉप वेब पर एक फेसबुक फ़ीड के समान है साथ कब दिखाया जाएगा चिपचिपा साइडबार व्यवहार के निर्माण पर काम कर रहा हूँ। position: stickyआसान उपयोग के मामले जहां साइडबार व्यूपोर्ट की ऊंचाई की तुलना में कम है के लिए अच्छी तरह से काम करता है। लेकिन अगर अपने साइडबार व्यूपोर्ट साइडबार जरूरतों कुछ स्क्रॉल तंत्र है ताकि आप साइडबार के निचले भाग देख सकते हैं के रूप में आप फ़ीड नीचे स्क्रॉल से बड़ा है।

मैं फेसबुक साइडबार चिपचिपा यहाँ पुस्तक को पुन: करने की कोशिश कर रहा हूँ।

वांछित व्यवहार को समझने के लिए सबसे अच्छा तरीका अपने फेसबुक फ़ीड का परीक्षण और अपनी स्क्रीन ऊंचाई हटना ताकि आपके व्यूपोर्ट अपने साइडबार ऊंचाई से छोटा होता है के लिए है। मैं यहाँ संक्षेप में प्रस्तुत करने की कोशिश करेंगे:

जब आपका व्यूपोर्ट अपने साइडबार (सरल मामले) से अधिक लंबी है

  1. साइडबार बिल्कुल बर्ताव करता है के रूप में आप स्थिति के साथ उम्मीद थी: चिपचिपा। एक ही स्थान पर साइडबार रहता है और जैसा कि आप नीचे स्क्रॉल करें और ऊपर इस प्रकार है।

जब आपका व्यूपोर्ट अपने साइडबार से छोटा होता है

  1. जब आप फ़ीड के साथ शुरू में साइडबार स्क्रॉल नीचे स्क्रॉल (वे एक साथ तय दिखाई देते हैं)
  2. जब आप अपने साइडबार की तह तक पहुंचने, यह तो तल पर ताले और के रूप में आप नीचे और स्क्रॉल, साइडबार अब नीचे तय साथ चिपचिपा प्रकट होता है
  3. अब आप का बैक अप स्क्रॉल, साइडबार एक बार फिर से अपने मुख्य फ़ीड से जुड़ी है, और मुख्य फ़ीड के साथ स्क्रॉल प्रकट होता है। एक बार जब आप साइडबार के शीर्ष मारा यह तो तय शीर्ष के साथ चिपचिपा है।
  4. इसलिए उन दोनों राज्यों (ऊपर तय जब तक स्क्रॉल, नीचे तय जब नीचे स्क्रॉल) के बीच, मुख्य फ़ीड के साथ सामंजस्य में साइडबार स्क्रॉल।

यह एक बहुत ही अच्छा स्क्रॉल अनुभव है लेकिन बहुत से बनाने के लिए मुश्किल है।

मैं एक साथ स्थिति चिपचिपा लगाने से ऊपर के चरणों को 1-3 में सूचीबद्ध राज्यों पूरा किया है topस्थिति, और जब आप नीचे स्क्रॉल, स्क्रॉल ईवेंट और कुछ व्यूपोर्ट / साइडबार ऊंचाई गणनाओं का उपयोग ऊंचाई अंतर निर्धारित करने के लिए और का समायोजन topसीएसएस मूल्य तो यह ताले जब नीचे से ऊपर स्क्रीन (अनिवार्य रूप से साथ पंक्तिवाला है initialTop - (sidebarHeight - viewportHeight)। मैं बाहर चरण 4 समझ नहीं सकता, और 5. सबसे अच्छा मैं कर सकता दोनों के बीच संक्रमण था topअपने स्क्रॉल दिशा के आधार पर मानों लेकिन यह एक बहुत बुरा UX है।

मैं यहाँ एक लेआउट के एक sandbox उदाहरण है: https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark

वहाँ 2 कॉलम (बाएं साइडबार और मुख्य फ़ीड) के साथ एक मूल लेआउट है। और एक घटक बुलाया प्रतिक्रिया है StickyScrollजो स्तंभ इर्द-गिर्द घूमती है और सभी अद्यतन करने के लिए तर्क है topमूल्य। यह एक अच्छा समाधान करने के लिए एक पूरी तरह से गलत शुरू हो सकता है लेकिन किसी भी मदद बहुत सराहना कर रहा है।

13/02/2020 को 21:51
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more