← Back to CSS Course | Chapter 8: Animations & Effects | Lesson 20 of 22

CSS Scroll Snap

किसी slideshow या photo gallery की कल्पना करें जहाँ scroll करना धीरे से हर image को एक साफ़, centered position में click कर देता है, आपको दो photos के बीच आधे में रुका हुआ छोड़ने के बजाय। CSS Scroll Snap इस satisfying, controlled scrolling behavior को pure CSS से संभव बनाता है, किसी JavaScript की ज़रूरत नहीं। आप एक scrollable container को scroll-snap-type से एक snap container मार्क करते हैं, फिर उसके children को scroll-snap-align से snap targets मार्क करते हैं। जैसे-जैसे कोई visitor scroll करता है, browser automatically nearest snap point पर settle हो जाता है, बिल्कुल वैसे जैसे किसी native app का carousel महसूस होता है।

In this page:

  1. Scroll Snap क्या है?
  2. scroll-snap-type
  3. scroll-snap-align
  4. Mandatory बनाम Proximity Snapping
  5. scroll-padding और scroll-snap-stop
Syntax
css 
.container {
  scroll-snap-type: x | y mandatory | proximity;
}
.item {
  scroll-snap-align: start | center | end;
}

Scroll Snap क्या है?

Scroll Snap किसी scrollable container को visitor के scroll करने पर automatically predefined positions पर settle होने देता है, सिर्फ CSS इस्तेमाल करके किसी native carousel या slideshow का smooth, clicking-into-place feel बनाते हुए।

Note:
  • Scroll Snap horizontally scrolling tool cards या image galleries के लिए बहुत अच्छा काम करता है, जहाँ हर item अपना खुद का साफ़, centered stop deserve करता है।
  • Accepted values:
  • scroll-snap-type — scroll container पर
  • scroll-snap-align — हर child पर
  • scroll-padding — snap area के लिए offset
  • scroll-snap-stop — items को skip होने से रोकता है
Warning: Scroll Snap बदल देता है कि scrolling कैसे settle होती है, लेकिन यह खुद scrollable container नहीं बनाता, आपको फिर भी overflow और एक defined size चाहिए।

उदाहरण: What Is Scroll Snap?

css 
<style>
.container {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  display: flex;
  gap: 10px;
}
.item {
  scroll-snap-align: center;
  display: inline-block;
  width: 200px;
  height: 80px;
  background: lightblue;
  flex-shrink: 0;
}
.item:nth-child(2) {
  background: lightgreen;
}
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

scroll-snap-type

scroll-snap-type खुद scrollable container पर set होता है, यह define करते हुए कि कौन-सा axis (x, y, या दोनों) snapping में participate करता है और snapping mandatory है या proximity।

Note:
  • किसी horizontal carousel के लिए scroll-snap-type: x mandatory इस्तेमाल करें, और किसी full-screen vertical section scroller के लिए scroll-snap-type: y mandatory।
  • Accepted values:
  • none — default, कोई snapping नहीं
  • x | y | both — snap करने के लिए axis
  • block | inline — logical axes
  • mandatory — हमेशा किसी point पर snap करता है
  • proximity — सिर्फ पास होने पर snap करता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: scroll-snap-type सिर्फ snapping behavior set up करता है, children को असल में participate करने के लिए फिर भी scroll-snap-align चाहिए।

उदाहरण: scroll-snap-type

css 
<style>
.container {
  display: flex;
  gap: 10px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
}
.item {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 200px;
  height: 80px;
  background: lightblue;
}
.item:nth-child(2) { background: lightgreen; }
.item:nth-child(3) { background: lightyellow; }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

scroll-snap-align

scroll-snap-align किसी snap container के children पर set होता है, exactly मार्क करते हुए कि जब browser उस पर settle हो तो हर एक को कहाँ align होना चाहिए, सबसे common रूप से start, center, या end।

Note:
  • किसी carousel के लिए center एक natural choice है जहाँ scrolling रुकने पर हर item को visual focus जैसा महसूस होना चाहिए।
  • Accepted values:
  • start — item की start edge को snap करता है
  • center — item के center को snap करता है
  • end — item की end edge को snap करता है
  • none — default, कोई snap position नहीं
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: children पर scroll-snap-align के बिना, parent पर scroll-snap-type के पास असल में snap करने के लिए कोई children नहीं होते।

उदाहरण: scroll-snap-align

css 
<style>
.container {
  display: flex;
  gap: 10px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
}
.item {
  scroll-snap-align: center;
  flex-shrink: 0;
  width: 200px;
  height: 80px;
  background: lightblue;
}
.item:nth-child(2) { background: lightgreen; }
</style>
<div class="container">
  <div class="item">Marks where this child aligns when scrolling stops</div>
  <div class="item">2</div>
</div>

Mandatory बनाम Proximity Snapping

Mandatory snapping हर scroll के बाद हमेशा किसी snap point पर आकर रुकता है, कोई exception नहीं। Proximity snapping सिर्फ तभी snap करता है जब scroll किसी snap point के पास रुकता है, free scrolling को कहीं और भी रुकने देते हुए।

Note:
  • लंबे, free-scrolling content के लिए proximity इस्तेमाल करें जहाँ snapping एक gentle nudge जैसा महसूस होना चाहिए, कोई hard rule नहीं।
  • Accepted values:
  • scroll-snap-type: x mandatory — हमेशा किसी snap point पर settle होता है
  • scroll-snap-type: x proximity — सिर्फ किसी point के पास snap करता है
  • mandatory — tall items के साथ users को trap कर सकता है
  • proximity — ज़्यादा gentle, browser तय करता है
Warning: किसी बहुत tall या wide container पर mandatory snapping jarring महसूस हो सकती है अगर कोई visitor casual scrolling के बीच में रुकने की कोशिश करे।

उदाहरण: Mandatory vs Proximity Snapping

css 
<style>
.row {
  display: flex;
  gap: 10px;
  overflow-x: scroll;
  padding: 10px;
  margin-bottom: 12px;
  background: #f0f0f0;
  border: 1px solid #ccc;
}
.mandatory { scroll-snap-type: x mandatory; }
.proximity { scroll-snap-type: x proximity; }
.item {
  scroll-snap-align: center;
  flex-shrink: 0;
  width: 200px;
  height: 80px;
  background: lightblue;
}
.item:nth-child(2) { background: lightgreen; }
</style>
<div class="row mandatory">
  <div class="item">Always comes to rest on a snap point</div>
  <div class="item">2</div>
</div>
<div class="row proximity">
  <div class="item">Only snaps if it stops near one</div>
  <div class="item">2</div>
</div>

scroll-padding और scroll-snap-stop

scroll-padding snap area को offset करता है, तब उपयोगी जब एक sticky header किसी snapped section के top को वरना cover कर देता। scroll-snap-stop: always browser को sequence में हर snap point पर रुकने पर मजबूर करता है, तेज़ scroll या swipe के दौरान कई को skip करने के बजाय।

Note:
  • scroll-padding-top को अपने sticky header की height के बराबर set करें ताकि snapped content कभी उसके नीचे hidden न रहे।
  • Accepted values:
  • scroll-padding: <length> — scroll port edge को offset करता है
  • scroll-snap-stop: normal — default, snap points skip कर सकता है
  • scroll-snap-stop: always — हर snap point पर रुकना चाहिए
  • scroll-padding-top — per-side variants मौजूद हैं
Warning: scroll-snap-stop: always किसी बहुत लंबी list of snap points पर sluggish महसूस हो सकता है, क्योंकि यह visitors को एक साथ कई को जल्दी skim करने से रोकता है।

उदाहरण: scroll-padding and scroll-snap-stop

css 
<style>
.container {
  display: flex;
  gap: 10px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 60px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
}
.item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex-shrink: 0;
  width: 200px;
  height: 80px;
  background: lightblue;
}
.item:nth-child(2) { background: lightgreen; }
.item:nth-child(3) { background: lightyellow; }
</style>
<div class="container">
  <div class="item">Offsets past a sticky header, stops at every item</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
Live Example
Related Topics

CSS Shapes · CSS Architecture: BEM · CSS Clip Path · CSS Custom Properties

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. container पर scroll-snap-type set करना लेकिन उसके children पर scroll-snap-align भूल जाना, जिसका नतीजा बिल्कुल कोई visible snapping न होना है।
  2. सिर्फ एक या दो children वाले container पर mandatory snapping इस्तेमाल करना, जो scrolling को अजीब तरह से restrictive महसूस करा सकता है।
  3. snap container पर overflow: auto (या scroll) भूल जाना, इसके बिना उसके अंदर असल में scroll और snap करने के लिए कुछ नहीं है।
चैप्टर सारांश
  • scroll-snap-type किसी scrollable container को x, y, या दोनों axis के साथ एक snap container में बदल देता है।
  • scroll-snap-align मार्क करता है कि हर child को कहाँ snap होना चाहिए, सबसे common रूप से start या center।
  • Mandatory snapping हमेशा किसी snap point पर settle होता है, जबकि proximity snapping सिर्फ तभी ऐसा करता है जब scrolling किसी के पास रुके।
ब्राउज़र सपोर्ट

CSS Scroll Snap properties हर modern browser द्वारा supported हैं।

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Shapes Next Lesson → CSS Architecture: BEM

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.