← Back to CSS Course | Chapter 5: Layout & Display | Lesson 13 of 14

CSS Overscroll Behavior

क्या कभी आप किसी popup chat box या comment list के bottom तक scroll हुए हैं, और जब उसका content खत्म हो गया, तो महसूस किया कि उसके पीछे का पूरा page भी scroll होने लगा? उस अनचाही hand-off को scroll chaining कहते हैं। CSS overscroll properties आपको scrolling को किसी box के अंदर contain करने देती हैं, control करने देती हैं कि layout shifts के दौरान कौन-सा element scroll position owns करता है, और scroll-snap targets के आस-पास breathing room जोड़ने देती हैं।

In this page:

  1. overscroll-behavior से Scroll Chaining रोकना
  2. overscroll-behavior-x और -y से Axis-Specific Control
  3. overflow-anchor से Layout Jumps रोकना
  4. scroll-margin से Snap Targets को Offset करना
  5. scroll-padding से Scroll Container को Offset करना
Syntax
css 
selector {
  overscroll-behavior: auto | contain | none;
}

overscroll-behavior से Scroll Chaining रोकना

Default रूप से, एक बार जब आप किसी nested element (जैसे modal या sidebar) को उसके edge तक scroll कर लेते हैं, तो आगे का scroll input parent page तक chain हो जाता है और उसे भी scroll करता रहता है। overscroll-behavior: contain उस hand-off को रोक देता है, scroll gesture को उसी element के अंदर trapped रखते हुए जहाँ से यह शुरू हुआ था।

Note:
  • chat windows और modals पर overscroll-behavior: contain set करें ताकि लंबी message list scroll करते users गलती से कभी उसके पीछे के page को scroll न करें।
  • Accepted values:
  • auto — normal scroll chaining (default)
  • contain — parent तक chaining रोकता है
  • none — chaining और bounce जैसे browser effects दोनों रोकता है
  • overscroll-behavior-x और overscroll-behavior-y से per axis set किया जा सकता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: overscroll-behavior: none contain से भी आगे जाता है, native bounce/refresh effects भी disable करते हुए, जो mobile browsers पर टूटा हुआ महसूस हो सकता है।

उदाहरण: Stopping Scroll Chaining with overscroll-behavior

css 
<style>
.modal {
  overflow-y: auto;
  height: 100px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 8px;
  overscroll-behavior: contain;
}
</style>
<div class="modal">
  <p>Long scrollable content that won't chain to the page.</p>
  <p>Paragraph 1 of filler content to make this box scrollable.</p>
  <p>Paragraph 2 of filler content to make this box scrollable.</p>
  <p>Paragraph 3 of filler content to make this box scrollable.</p>
  <p>Paragraph 4 of filler content to make this box scrollable.</p>
  <p>Paragraph 5 of filler content to make this box scrollable.</p>
  <p>Paragraph 6 of filler content to make this box scrollable.</p>
  <p>Paragraph 7 of filler content to make this box scrollable.</p>
  <p>Paragraph 8 of filler content to make this box scrollable.</p>
  <p>Paragraph 9 of filler content to make this box scrollable.</p>
  <p>Paragraph 10 of filler content to make this box scrollable.</p>
  <p>...it won't scroll the page behind it.</p>
</div>

overscroll-behavior-x और -y से Axis-Specific Control

overscroll-behavior-x और overscroll-behavior-y आपको सिर्फ एक axis पर scroll chaining contain करने देते हैं, दूसरे axis को normally chain करने के लिए free छोड़ते हुए।

यह horizontally-scrolling carousels के लिए खासतौर पर उपयोगी है, जहाँ आप horizontal chaining रोकना चाहते हैं लेकिन फिर भी page को हमेशा की तरह vertically scroll होने देना चाहते हैं।

Note:
  • horizontal image carousels पर overscroll-behavior-x: contain इस्तेमाल करें ताकि images के through swipe करना mobile पर कभी vertical page scroll trigger न करे।
  • Accepted values:
  • auto — default scroll chaining (initial value)
  • contain — ancestors तक कोई chaining नहीं, bounce effects बनाए रखता है
  • none — कोई chaining नहीं और कोई bounce effect नहीं
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: सिर्फ overscroll-behavior-x set करना y-axis को उसकी default value auto पर छोड़ देता है, इसलिए अलग से set न करने पर vertical chaining फिर भी होगी।

उदाहरण: Axis-Specific Control with overscroll-behavior-x and -y

css 
<style>
.carousel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  background: #f0f0f0;
  border: 1px solid #ccc;
  padding: 8px;
  overscroll-behavior-x: contain;
}
.carousel .card {
  flex: 0 0 120px;
  height: 80px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}
</style>
<div class="carousel">
  <div class="card" style="background:#e74c3c">1</div>
  <div class="card" style="background:#3498db">2</div>
  <div class="card" style="background:#2ecc71">3</div>
  <div class="card" style="background:#f1c40f">4</div>
  <div class="card" style="background:#9b59b6">5</div>
  <div class="card" style="background:#e67e22">6</div>
  <div class="card" style="background:#1abc9c">7</div>
</div>

overflow-anchor से Layout Jumps रोकना

overflow-anchor scroll anchoring control करता है, एक browser feature जो viewport के ऊपर का content size बदलने पर (जैसे कोई image load पूरी होना) आपकी visual scroll position को automatically stable रखता है।

इसे none set करना इस automatic correction को disable कर देता है, जो कभी-कभी chat apps के लिए उपयोगी है जो जानबूझकर scroll को bottom पर pin करते हैं।

Note:
  • लगभग हर case में overflow-anchor को उसकी default value auto पर छोड़ें, क्योंकि scroll anchoring ही वह चीज़ है जो page load होते समय jarring jumps को रोकती है।
  • Accepted values:
  • auto — scroll anchoring चालू (initial value)
  • none — scroll anchoring बंद
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: overflow-anchor को globally disable करना उस classic "page ऊपर की image load होने से jump हो गया" bug को वापस ला सकता है जिसे fix करने के लिए scroll anchoring मौजूद है।

scroll-margin से Snap Targets को Offset करना

scroll-margin किसी element के चारों ओर invisible space जोड़ता है जो सिर्फ यह असर करता है कि browser कहाँ scroll रोकता है जब वह element एक scroll-snap target बनता है -- यह element की visible layout position को कभी नहीं बदलता जैसे एक normal margin बदल देती।

यह किसी snapped section और उसे overlap कर सकने वाले किसी fixed header के बीच एक gap छोड़ने के लिए उपयोगी है।

Note:
  • scroll-margin-top को अपने fixed header की height के बराबर set करें ताकि scroll-snapped sections header के नीचे साफ़ तरीके से रुकें, उसके नीचे छुपने के बजाय।
  • Accepted values:
  • length — जैसे 80px
  • एक से चार values — top, right, bottom, left order
  • 0 — कोई margin नहीं (initial value)
  • scroll-margin-top और दूसरे side longhands
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: scroll-margin का किसी scroll-snap context के बाहर बिल्कुल कोई visible effect नहीं होता, इसलिए इसे regular margin spacing के substitute के रूप में इस्तेमाल न करें।

उदाहरण: Offsetting Snap Targets with scroll-margin

css 
<style>
.container {
  height: 150px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  border: 1px solid #ccc;
}
.container section {
  scroll-snap-align: start;
  scroll-margin-top: 60px;
  height: 120px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
<div class="container">
  <section id="s1" style="background:lightblue">Section 1 — stops cleanly below a 60px fixed header</section>
  <section id="s2" style="background:lightgreen">Section 2 — snaps here next</section>
  <section id="s3" style="background:lightyellow">Section 3 — last snap target</section>
</div>

scroll-padding से Scroll Container को Offset करना

scroll-padding scroll-margin जैसा ही काम करता है लेकिन इसके अंदर के target elements के बजाय खुद scrolling container पर set किया जाता है, scroll-snap calculations के लिए इस्तेमाल होने वाले effective viewport को shrink करते हुए।

यह container-side equivalent है, उपयोगी जब किसी list में हर snap target को container edges से एक जैसा consistent offset चाहिए।

Note:
  • अंदर के हर individual snap target पर scroll-margin-top set करने के बजाय scroll container पर scroll-padding-top इस्तेमाल करें।
  • Accepted values:
  • length — जैसे 80px
  • percentage — scrollport के relative
  • auto — कोई padding नहीं (initial value)
  • एक से चार values — top, right, bottom, left order
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: container पर scroll-padding को children पर conflicting scroll-margin values के साथ mix करना confusing, predict करना मुश्किल snap offsets पैदा कर सकता है।

उदाहरण: Offsetting the Scroll Container with scroll-padding

css 
<style>
.container {
  scroll-padding-top: 60px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  height: 150px;
  background: #f0f0f0;
  border: 1px solid #ccc;
}
.container section {
  scroll-snap-align: start;
  height: 120px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
<div class="container">
  <section style="background:lightblue">Section 1 — container reserves 60px at the top via scroll-padding</section>
  <section style="background:lightgreen">Section 2</section>
  <section style="background:lightyellow">Section 3</section>
</div>
Live Example
Related Topics

CSS Calc Deep Dive · CSS Resize · CSS Tooltips · CSS Align

{# 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. यह भूल जाना कि overscroll-behavior सिर्फ यह असर करता है कि कोई scrollable element अपने edge तक पहुँचने पर क्या होता है, general scrolling को नहीं।
  2. contain के बजाय overscroll-behavior: none इस्तेमाल करना, जो कुछ users के भरोसा किए जाने वाले native pull-to-refresh और bounce effects को भी disable कर देता है।
  3. margin के बजाय scroll-margin लागू करना और उम्मीद करना कि यह layout spacing बदल देगा, जबकि यह सिर्फ scroll-snap stopping position को असर करता है।
चैप्टर सारांश
  • overscroll-behavior (और इसके -x/-y variants) scroll chaining रोकता है, इसलिए किसी nested box को scroll करना उसके पीछे के page को भी scroll नहीं करता।
  • overflow-anchor उस jarring jump को रोकता है जो तब होता है जब आपकी current scroll position के ऊपर content load होता है।
  • scroll-margin और scroll-padding क्रमशः scroll-snap targets और scroll containers के चारों ओर invisible offset space जोड़ते हैं।
ब्राउज़र सपोर्ट

overscroll-behavior और overflow-anchor हर modern Chromium और Firefox browsers में supported हैं; overscroll-behavior के लिए Safari support हाल ही में आया है, इसलिए हमेशा specifically iOS Safari पर test करें।

🔒

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson CSS Calc Deep Dive Next Lesson → CSS Resize

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.