स्क्रॉल-व्यवहार - सीएसएस-ट्रिक्स

scroll-behaviorसीएसएस में संपत्ति हमें ब्राउज़र की पुस्तक स्थान एक नए स्थान पर कूदता है या आसानी से जब कोई उपयोगकर्ता किसी लिंक पर क्लिक संक्रमण एनिमेट कि क्या परिभाषित करने के लिए अनुमति देता है कि लक्ष्य एक स्क्रॉल बॉक्स के अंदर एक लंगर स्थिति।

html ( scroll-behavior: smooth; )

गहरी व्याख्या

रुको, रुको, हम इस स्क्रॉल बॉक्स की क्या बात करते हैं? यह सामग्री के साथ एक तत्व है जो इसकी सीमा से अधिक है।

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन स्क्रॉलिंग बॉक्स देखें।

ध्यान दें कि ऊपर दिए गए डेमो में बॉक्स की ऊंचाई कितनी है 200px? कोई भी सामग्री जो उस ऊंचाई से अधिक है वह बॉक्स की सीमा के बाहर है और हमने overflow-y: scrollउस अतिरिक्त सामग्री को वर्टिकल स्क्रॉलिंग के साथ सुलभ बनाने के लिए जोड़ा है। स्क्रॉल बॉक्स से हमारा मतलब है।

अब कहते हैं कि हम सामग्री के तीन वर्गों को लक्षित करने वाले प्रत्येक लिंक के साथ बॉक्स के शीर्ष पर एक नेविगेशन जोड़ते हैं:

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन स्क्रॉलिंग बॉक्स w / Nav देखें।

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

इस तरह की छलांग मारना हो सकता है। यही वह जगह है जहां scroll-behaviorहमें एक चिकनी स्क्रॉल संक्रमण सेट करने की अनुमति मिलती है। इस तरह की चीज फैंसी जावास्क्रिप्ट लेने के लिए इस्तेमाल की जाती है लेकिन scroll-behaviorहमें ब्राउज़र सपोर्ट में सुधार होने पर सीएसएस में मूल रूप से ऐसा करने की क्षमता देगा।

वाक्य - विन्यास

.module ( scroll-behavior: ( auto | smooth ); )

मूल्यों

scroll-behaviorसंपत्ति दो मानों, जो अनिवार्य रूप टॉगल चालू और बंद स्क्रॉल सुविधा चिकनी स्वीकार करता है।

• auto (डिफ़ॉल्ट): यह मान स्क्रॉल बॉक्स के भीतर तत्वों के बीच अचानक कूदने की अनुमति देता है।
• smooth: अपने नाम के लिए सच है, यह मान स्क्रॉल बॉक्स के भीतर तत्वों के बीच चिकनी एनिमेटेड संक्रमण है।

डेमो

इस प्रदर्शन के समय निम्नलिखित डेमो केवल क्रोम 61+, फ़ायरफ़ॉक्स 36+ और ओपेरा 48+ पर काम करेगा।

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन स्क्रॉलिंग बॉक्स w / `स्क्रॉल-व्यवहार` देखें।

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
६१	३६	नहीं न	। ९	नहीं न

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	नहीं न

अधिक जानकारी

• CSSOM देखें मॉड्यूल: ड्राफ्ट विनिर्देशन, सीएसएस संपत्ति सहित। वर्तमान मसौदे में एक scroll-behaviorऔर युक्ति को स्थानांतरित करने की सिफारिश शामिल है , इसलिए यह देखना दिलचस्प होगा कि वह भूमि कहां है।
• मोज़िला डेवलपर नेटवर्क: विनिर्देश के लिए एमडीएन संदर्भ
• Microsoft एज प्लेटफ़ॉर्म स्थिति: वर्तमान में इस सुविधा की स्थिति को अंडर कंसीडरेशन के रूप में प्रदर्शित करता है
• क्रोम प्लेटफ़ॉर्म स्थिति: वर्तमान में इस सुविधा की स्थिति को विकास के रूप में दिखाता है और इसमें एक प्लेटफ़ॉर्म के रूप में अन्य प्लेटफ़ॉर्म के लिए स्थितियाँ शामिल हैं
• स्मूथ स्क्रॉलिंग स्निपेट: जावास्क्रिप्ट और jQuery के साथ चिकनी स्क्रॉलिंग को सक्षम करने के लिए स्निपेट्स
• चिकनी स्क्रॉलिंग और पहुंच: जावास्क्रिप्ट-सक्षम चिकनी स्क्रॉल के प्रभाव पर एक सीएसएस-ट्रिक्स पोस्ट