انواع Overflow در CSS

اگر به طراحی با CSS علاقه دارید قطعا با ویژگی Overflow آشنا هستید . این ویژگی بخش سرریز در طراحی را مدیریت خواهد کرد . نکته مهمی که در طراحی وجود دارد اینجاست که شما نباید از این ویژگی جهت رفع خطاهایی که روش درست آنها را نمی‌دانید استفاده کنید .

در برخی موارد ممکن است شما در قسمتی ار طراحی اشتباه کرده باشید و این اشتباه سبب سرریز شود . در حالیکه شما باید دنبال دلیل این Overflow باشید و آن را حل کنید توسط دستور Overflow با مقدار hidden سعی دارید تا روی این خطا سرپوش گذاشته و اصطلاحا صورت مسئله را پاک کنید . لذا دقت داشته باشید که دستور Overflow را باید به شکل اصولی فرا گرفته و از آن استفاده کنید .

Overflow با حالت hidden

یکی از معروف ترین حالات برای دستور Overflow ، وضعیت hidden یا مخفی آن است . زمانی که شما قصد دارید تا div یا المان والد ، اجازه خروج و نمایش المان‌های فرزند را خارج از محدوده آن ایجاد نکند ، می‌توانید از دستور Overflow با حالت hidden استفاده کنید . در مثال زیر ، دستور Overflow بصورت پیشفرض روی هیچ مقداری تنظیم نشده است و مشاهده می‌کنید که باکس قرمز رنگ با اینکه فرزند باکس آبی است و با دستور position داخل باکس والد خود قرار گرفته است ، اما عرض آن از عرض والد خودش بیشتر است .

اکنون اگر در این حالت برای div آبی رنگ که والد محسوب می‌شود از دستور زیر استفاده کنیم :

overflow:hidden;

خروجی به شکل زیر خواهد بود :

با اینکه عرض باکس قرمز هنوز هم از باکس آبی بیشتر است اما اینجا دیگر Overflow یا همان سرریز از باکس آبی نداریم و تمام باکس قرمز داخل باکس آبی حبس شده است . این حالت را بیشتر برای استایل تصاویر در کارت محصولات و … استفاده می‌کنیم تا بتوانیم افکت‌هایی همچون Scale و … را هنگام hover شدن روی تصاویر اجرا کنیم .

Overflow با حالت scroll

یکی دیگر از حالت‌های Overflow بصورت scroll است . مجدد همان مثال بالا را اینبار به شکل دیگری خواهیم دید . اکنون دستور زیر را برای باکس آبی بصورت زیر تعریف خواهیم کرد :

در این حالت شاهده هستید که از حالت افقی بروی باکس اسکرول داریم و می‌توانید با اسکرول کردن در عرض ، ادامه محتوای باکس که مربوط به بخش قرمز رنگ است را مشاهده کنید . اما با اینکه در حالت عمودی اسکرول و سرریز نداریم ، یک اسکرول بار در بخش عمودی نیز ایجاد شده است . برای اینکه محتوای خود را در باکسی با عرض یا ارتفاع مشخص محبوس کنید و اسکرول بار ایجاد کنید ، این دستور کاربردی است اما در محوری که به آن نیاز نداریم هم اکنون اسکرول بار غیرفعال داریم . برای حل این مشکل باید چکار کرد ؟

Overflow با حالت auto

برا اینکه مشکل نمایش اسکرول بار غیرفعال را حل کنیم باید دستوری داشته باشیم که فقط در محوری که محتوای سرریز شده داریم برای ما اسکرول ایجاد کنید . لذا برای باکس والد و آبی رنگ اکنون از این دستور استفاده می‌کنیم :

overflow:auto;

خروجی این دستور به شکل زیر خواهد بود :

اکنون مشاهده می‌کنید که تنها در محور افقی اسکرول بار را مشاهده می‌کنیم ولذا اکنون این مشکل برای شما حل خواهد شد . اما تنها یکی از حالت‌های Overflow باقی مانده که بصورت پیشفرض تنظیم شده است و خروجی آن را در اولین مثال مشاهده کردید . این دستور overflow با مقدار visible است که در ابتدا بصورت پیشفرض در تمامی صفحات وب تنظیم شده است و اگر در پروژه خاصی overflow شما مقداری غیر از visible داشت ، می‌توانید توسط مقدار visible آن را خنثی کنید .

حالت های مشتق

برای دستور Overflow دو دستور دیگر بصورت Overflow-x و همچنین Overflow-y وجود دارد که مطمئنا نیازی به توضیح ندارند و متوجه شده‌اید که دستور Overflow-x سرریز را تنها در محور افقی پنهان می‌کند و دستور Overflow-y تنها در حالت عمودی باعث عدم نمایش سرریز خواهد بود که بسته به محل کدنویسی ممکن است استفاده شود . دستور Overflow با مقدار hidden حالت سرریز را در هر 4 طرف پنهان می‌کند . امیدواریم این مقاله کوتاه و کاربردی برای شما مفید بوده باشد .