ویژگی overflow در زبان CSS

CSS Overflow Property

0 396

ویژگی overflow چیست؟

در زبان CSS، ویژگی ای به نام overflow وجود دارد. کار این ویژگی محدود کردن محتوای یک صفحه است تا از حد خودش تجاوز نکند؛ به طوری که اگر محتوای مورد نظر ما (مثلا چند پاراگراف متنی) از محدوده ی خودش خارج شود این دستور آن را درون محدوده ی خودش قرار داده و برای دیده شدن کامل مطلب به آن محدوده اسکرول بار اضافه می کند. به مثال زیر نگاه کنید:

مشاهده ی خروجی در JSBin

در این مثال متنی طولانی را انتخاب کرده ایم ولی محدوده ی نگه دارنده اش را کوچک کرده ایم. سپس با استفاده از ویژگی overflow آن را در همان محدوده قرار داده و برایش اسکرول بار گذاشته ایم. البته شما می توانید با مقادیر دیگر دستور overflow کار های دیگری نیز بکنید. مقادیر مجاز برای overflow از این قرار اند:

  • visible : این مقدار، حالت پیش فرض است. در این حالت محتوا محدود نمی شود بلکه از نگه دارنده ی خود خارج شده و از محدوده اش تجاوز می کند
  • hidden : در این حالت محتوای اضافی کاملا قطع شده و دیگر قابل مشاهده نمی باشد
  • scroll : در این حالت محتوا محدود می شود و برای دیده شدن کامل آن به نگه دارنده یک اسکرول بار افزوده می شود
  • auto : این حالت دقیقا مانند scroll است اما تنها زمانی که واقعا نیاز باشد اسکرول بار را اضافه میکند

نکته: ویژگی overflow تنها برای عناصر Block ای کار می کند که ارتفاع (height) آن ها مشخص شده باشد.

بیایید مثال هایی را از هر کدام از این مقادیر ببینیم.

حالت visible

همانطور که گفتیم در این حالت خصوصیت overflow مقدار visible را می گیرد که در لغت به معنی «نمایان» یا «قابل رویت» است. این حالت همان حالت پیش فرض است و اگر محتوای عنصری در این حالت از حد خودش بیشتر باشد، باز هم قابل رویت خواهد بود چرا که بدون توجه به محدوده از مرز خودش فراتر می رود. به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

حالت hidden

hidden در لغت به معنی «مخفی» است. در این حالت اگر محتوای عنصر از حد خودش بیشتر شود، قسمت اضافی برش می خورد و دیگر نمایش داده نمی شود. به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

ویژگی scroll

ویژگی scroll برایش مهم نیست که محتوا از حد خود تجاوز کرده است یا خیر بنابراین چه نیاز باشد و چه نباشد، یک اسکرول بار افقی و یک اسکرول بار عمودی به آن قسمت اضافه می کند:

مشاهده ی خروجی در JSBin

در مثال بالا می بینید، با اینکه نیازی به اسکرول افقی نیست اما ان را هم اضافه کرده است. در واقع حتی اگر متن ما کوچک بود باز هم هر دو اسکرول اضافه می شدند.

ویژگی auto

حالت auto بسیار شبیه به مقدار scroll است با این تفاوت که کمی هوشمند تر است و تنها زمانی اسکرول بار ها را اضافه می کند که واقعا نیازی به آن ها باشد (چه عمودی و چه افقی).

به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

همانطور که در این مثال مشاهده می کنید تنها اسکرول عمودی را داریم و از اسکرول افقی خبری نیست.

سوال: اگر بخواهیم تنها در حالت افقی یا عمودی اسکرول اضافه کنیم چه کار باید بکنیم؟

پاسخ: شما می توانید از دستور overflow-x برای اضافه کردن اسکرول بار در محور افقی و overflow-y برای اضافه کردن آن در محور عمودی استفاده کنید:

مشاهده ی خروجی در JSBin

در این صورت می توانیم برای محور های عمودی و افقی به صورت جداگانه اسکرول تعریف کنیم.

امیدوارم از این قسمت لذت برده باشید.

ترتیبی که روکسو برای یادگیری مطالب سری صفر تا صد CSS به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle