Magdy Atef Zahran

Overflow & Scroll Utilities في Tailwind

الـ Overflow من الحاجات اللي ساعات بنطنشها وإحنا بنشتغل… لكن في الحقيقة هي اللي بتتحكم في شكل العناصر لو محتواها طلع أكبر من المساحة المخصصة ليها. Tailwind مدينا Utilities قوية وسريعة تخلينا نتحكم في السيناريو ده من غير وجع دماغ…

🎯 أولاً: الـ Overflow

تقدر تتحكم في طريقة عرض المحتوى لما يخرج برا العنصر باستخدام:

<div class="w-64 h-32 overflow-hidden bg-gray-200"> <p> ده محتوى طويل جدًا جدًا جدًا جدًا جدًا جدًا جدًا… </p> </div>

overflow-hidden = يخفي أي محتوى زائد
overflow-scroll = يضيف Scroll دايم حتى لو المحتوى مش كبير
overflow-auto = يضيف Scroll بس لما المحتوى يخرج برا
overflow-visible = يسيب المحتوى يظهر برا العنصر (الـ Default)

التحكم في الاتجاه (X & Y)

التحكم في الاتجاه (X & Y):

<div class="w-64 h-32 overflow-x-scroll overflow-y-hidden"> <p class="w-[600px]">ده محتوى عريض جدًا...</p> </div>

overflow-x-scroll = يعمل Scroll أفقي
overflow-y-scroll = يعمل Scroll رأسي

🖱️ Smooth Scrolling

Tailwind كمان بيديك scroll-smooth علشان التنقل بين الأقسام يبقى ناعم:

<html class="scroll-smooth"> <a href="#section2">انزل للقسم 2</a> ... <div id="section2">القسم 2</div> </html>

Scroll Snap (تجربة حديثة ومفيدة)

تقدر تعمل Snap Points علشان العناصر تعمل Align بشكل أنيق وقت ما تسكرول:

snap-x / snap-y → تحدد الاتجاه.
snap-start / snap-center / snap-end → تحدد مكان الـ Snap

الخلاصه…

الـ Overflow & Scroll Utilities في Tailwind بتخليك تتحكم في المحتوى وقت ما يخرج برا حدود العنصر سواء هتخفيه او تسيبه اويظهر أو تزود له Scroll وكمان تقدر تعمل Scroll Smooth وسيناريوهات Snap حديثة تعزز تجربة المستخدم 👌