scroll-behavior: smooth
scroll-behavior से anchor link और programmatic scroll के लिए smooth scrolling सक्षम कीजिए।
scroll-behavior: smooth, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
स्क्रॉल-व्यवहार क्या है
scroll-behavior यह नियंत्रित करता है कि नेविगेशन (एंकर लिंक, JavaScript scrollTo()) से शुरू होने वाली स्क्रॉलिंग सहज रूप से एनीमेट होनी चाहिए या तुरंत छलाँग लगानी चाहिए।
स्क्रॉल-व्यवहार: सहज
html या body तत्व पर scroll-behavior: smooth सेट करने से पूरे पृष्ठ के एंकर लिंक नेविगेशन में सहज एनीमेशन आता है:
<p>Scrolling on this page is smooth thanks to <code>html { scroll-behavior: smooth; }</code>.</p>तुरंत बनाम सहज
मान:
auto(डिफ़ॉल्ट): तुरंत छलाँगsmooth: लक्ष्य तक एनीमेशन के साथ स्क्रॉल
एंकर लिंक नेविगेशन
सहज स्क्रॉलिंग सक्षम होने पर <a href="#contact"> जैसे लिंक पर क्लिक करने से तुरंत छलाँग लगाने के बजाय id="contact" वाले तत्व तक सहज रूप से स्क्रॉल होता है।
<nav>
<a href="#about">About</a>
<a href="#work">Work</a>
<a href="#contact">Contact</a>
</nav>
<section id="about"><h3>About</h3></section>
<section id="work"><h3>Work</h3></section>
<section id="contact"><h3>Contact</h3></section>सहजता के साथ JavaScript scrollTo()
एनीमेशन वाली स्क्रॉलिंग के लिए JavaScript स्क्रॉल विधियों को behavior: "smooth" पास करें:
<pre class="snippet">window.scrollTo({ top: 0, behavior: 'smooth' });
document.querySelector('#section').scrollIntoView({
behavior: 'smooth',
block: 'start'
});</pre>कम गति पसंद करने की सेटिंग के साथ व्यवहार
सहज स्क्रॉलिंग से मोशन सिकनेस हो सकती है। कम गति पसंद करने वाले उपयोगकर्ताओं के लिए इसे हमेशा बंद करें:
<p>Respects <code>prefers-reduced-motion</code>.</p>कंटेनरों पर स्क्रॉल-व्यवहार
इसे केवल पृष्ठ पर नहीं, बल्कि किसी भी स्क्रॉल करने योग्य कंटेनर पर लागू करें:
<div class="tabs-panel">
<div class="tab">Tab 1</div><div class="tab">Tab 2</div><div class="tab">Tab 3</div>
</div>सीमाएँ
CSS का स्क्रॉल-व्यवहार स्क्रॉल की अवधि या ईज़िंग पर नियंत्रण नहीं देता। सटीक एनीमेशन नियंत्रण के लिए JavaScript वेब एनीमेशन इंटरफ़ेस या GSAP जैसी लाइब्रेरी और उनके स्क्रॉल प्लग-इन का उपयोग करें।
स्थिर शीर्षलेखों के लिए स्क्रॉल-पैडिंग-टॉप
जब कोई स्थिर शीर्षलेख एंकर लक्ष्यों को ढक लेता है, तो scroll-padding-top एक ऑफ़सेट जोड़ता है, जिससे लक्ष्य शीर्षलेख के पीछे छिपता नहीं है:
<p>Anchor targets offset by fixed header height.</p>स्क्रॉल-मार्जिन बनाम स्क्रॉल-पैडिंग
scroll-margin सीधे लक्ष्य तत्व पर ऑफ़सेट जोड़ता है; scroll-padding स्क्रॉल कंटेनर पर ऑफ़सेट जोड़ता है। दोनों स्थिर शीर्षलेख की समस्या हल करते हैं:
<div class="section">Section content</div>अभिगम्यता संबंधी सूचना
सहज स्क्रॉलिंग यूएक्स का सुधार है। हमेशा सुनिश्चित करें कि इसके बिना भी एंकर नेविगेशन काम करे — कार्यक्षमता के लिए सहज स्क्रॉलिंग पर निर्भर न रहें, इसका उपयोग केवल दृश्य सज्जा के लिए करें।
त्वरित जाँच
आप वेस्टिब्युलर गति-संवेदनशीलता वाले उपयोगकर्ताओं के लिए सहज स्क्रॉल एनीमेशन को बंद होना कैसे सुनिश्चित करेंगे?
पुनरावलोकन
html पर scroll-behavior: smooth एंकर लिंक और JavaScript स्क्रॉल विधियों के लिए सहज एनीमेशन वाली स्क्रॉलिंग सक्षम करता है। स्थिर शीर्षलेखों के पीछे स्क्रॉल लक्ष्यों को छिपने से बचाने के लिए scroll-padding-top का उपयोग करें। अभिगम्यता के लिए prefers-reduced-motion: reduce मीडिया क्वेरी के अंदर सहज स्क्रॉलिंग को हमेशा बंद करें।
एआई शिक्षक के साथ CSS सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “scroll-behavior: smooth” पाठ निःशुल्क है?
हाँ—“scroll-behavior: smooth” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“scroll-behavior: smooth” में मैं क्या सीखूँगा?
scroll-behavior से anchor link और programmatic scroll के लिए smooth scrolling सक्षम कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“scroll-behavior: smooth” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- overflow: hidden scroll auto clip
- scroll-behavior: smooth
- scroll-snap-type और scroll-snap-align
- ::-webkit-scrollbar से Scrollbar Styling