🔹 Overscroll Behavior چیه؟

وقتی داخل یک المان اسکرول می‌کنیم و به انتهای محتوای اون می‌رسیم، مرورگر معمولاً یک واکنش پیش‌فرض داره:

• در موبایل‌ها: صفحه کل رو به همراه المان اسکرول می‌کنه.

• در دسکتاپ: ممکنه باعث bounce effect یا حتی اسکرول شدن کل صفحه بشه.

با overscroll-behavior می‌تونیم این رفتار رو کنترل کنیم.

🔹 کلاس‌های Overscroll در Tailwind

• overscroll-auto → رفتار پیش‌فرض مرورگر (پیش‌فرض).

• overscroll-contain → اسکرول داخل همون المان محدود میشه و به والد منتقل نمیشه.

• overscroll-none → کاملاً جلوی overscroll و bounce گرفته میشه.

همچنین میشه جهت رو هم مشخص کرد:

• overscroll-x-auto , overscroll-x-contain , overscroll-x-none

• overscroll-y-auto , overscroll-y-contain , overscroll-y-none

🔹 مثال (overscroll-auto – پیش‌فرض)

<div class="w-40 h-20 border overflow-auto overscroll-auto">
  <p>
    متن طولانی برای تست اسکرول... متن طولانی برای تست اسکرول... متن طولانی برای تست اسکرول...
  </p>
</div>

📌 بعد از رسیدن به انتهای محتوا، اسکرول می‌تونه به والد منتقل بشه.

🔹 مثال (overscroll-contain)

<div class="w-40 h-20 border overflow-auto overscroll-contain">
  <p>
    متن طولانی برای تست اسکرول... متن طولانی برای تست اسکرول... متن طولانی برای تست اسکرول...
  </p>
</div>

📌 اسکرول فقط داخل همین div محدود میشه و به والد منتقل نمیشه.

🔹 مثال (overscroll-none)

<div class="w-40 h-20 border overflow-auto overscroll-none">
  <p>
    متن طولانی برای تست اسکرول... متن طولانی برای تست اسکرول... متن طولانی برای تست اسکرول...
  </p>
</div>

📌 هیچ bounce یا انتقال اسکرول اتفاق نمیفته؛ اسکرول فقط همونجا متوقف میشه.

🔹 نکته مهم

• برای ساخت مودال (Modal) یا اسلایدرها خیلی کاربردیه چون نمی‌خوای اسکرول کاربر به کل صفحه منتقل بشه.

• در موبایل برای جلوگیری از اسکرول ناخواسته کل صفحه خیلی استفاده میشه.

• معمولاً همراه با overflow-auto یا overflow-scroll استفاده میشه.