کنترل Overflow

مقدمه

Overflow یا سرریز زمانی رخ می‌دهد که محتوایی که برای یک عنصر در نظر گرفته‌ایم، بیشتر از ظرفیت آن عنصر باشد. در این درس، در مورد Overflow و روش‌هایی که CSS برای کنترل این پدیده ارائه می‌دهد، صحبت می‌کنیم. ابتدا خواهیم دید که CSS در مواجهه با Overflow چه رفتاری دارد و سپس خواهیم دید که چطور می‌توانیم این رفتار را با استفاده از یک پراپرتی به نام overflow کنترل کنیم.

رفتار CSS در مواجهه با Overflow

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

در مثال زیر، باکسی داریم که ارتفاع آن با استفاده از پراپرتی height محدود شده و سپس، محتوایی بیش از ظرفیت این باکس را درون آن قرار داده‌ایم. در نتیجه‌ی این کار، محتوا سرریز شده و مثل آوار روی سر پاراگراف زیرین خراب می‌شود:

CSS

.box{
  border: 1px solid #333333;
  width: 200px;
  height: 100px;
}

در مثال بعدی، ما یک کلمه در یک باکس داریم اما باکس ما آنقدر بزرگ نیست که بتواند این کلمه را کاملاً در برگیرد و لذا بخشی از کلمه در بیرون از باکس قرار می‌گیرد:

CSS

.word{
  border: 1px solid #333333;
  width: 100px;
  font-size: 250%;
}

آنچه از این دو مثال برمی‌آید، این است که CSS در مواجهه با پدیده‌ی Overflow هیچ‌گونه کار کنترلی و اصلاحی مانند مخفی کردن محتوای سرریز شده یا افزایش خودکار سایز باکسِ دربرگیرنده‌ی محتوا انجام نمی‌دهد. شاید از خود بپرسید که چرا CSS در مواجهه با سرریز محتوا تا این حد آشفته و شلخته عمل می‌کند؟ چرا مثلاً محتوای سرریز شده را پنهان نمی‌کند؟ یا چرا باکس کانتینر را تغییر اندازه نمی‌دهد تا بتواند محتوا را در برگیرد؟

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

پراپرتی overflow

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

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

در مثال‌های زیر، می‌توانید تأثیر هر یک از مقادیر بالا را روی پراپرتی overflow ببینید. در اولین مثال، تأثیر مقدار hidden را برای پراپرتی overflow می‌بینیم:

CSS

.box{
  border: 1px solid #333333;
  width: 200px;
  height: 100px;
  overflow: hidden;
}

همانطور که می‌بینید، مقدار hidden باعث می‌شود که در هنگام بروز سرریز، محتوای سرریزشده مخفی شود و نمایش داده نشود. با این حساب، از این مقدار باید تنها در صورتی استفاده کنیم که عدم نمایش محتوا مشکلی به وجود نیاورد.

مثال بعدی، به بررسی تأثیر مقدار scroll برای پراپرتی overflow اختصاص دارد:

CSS

.box{
  border: 1px solid #333333;
  width: 200px;
  height: 100px;
  overflow: scroll;
}

همانطور که می‌بینید، تخصیص مقدار scroll به پراپرتی overflow باعث می‌شود که در صورت بروز سرریز، مرورگر با نمایش نوارهای پیمایش (scrollbars) افقی و عمودی امکان مشاهده‌ی محتوای سرریزشده را فراهم کند.

در مثال بالا، اگر محتعوای درون باکس را کاهش دهیم به طوری که سرریز رخ ندهد، خواهیم دید که نوارهای پیمایش همچنان نمایش داده می‌شوند اما با تخصیص مقدار auto به پراپرتی overflow می‌توانیم ترتیبی دهیم که این نوارها تنها در صورتی نمایش داده شوند که سرریز رخ دهد؛ یعنی زمانی که واقعاً‌ به آنها نیاز باشد. مثال زیر را ببینید:

CSS

.box{
  border: 1px solid #333333;
  width: 200px;
  height: 100px;
  overflow: auto;
}

در مثال بالا تنها یک نوار پیمایش عمودی نمایش داده می‌شود؛ زیرا سرریز در این جهت رخ داده و به نوار افقی نیاز نیست. اگر محتوای باکس مثال بالا را کاهش دهیم تا سرریز رخ ندهد، نوار عمودی نیز ناپدید می‌شود.

پراپرتی overflow در حقیقت، یک پراپرتی اختصاری برای پراپرتی‌های overflow-x و overflow-y است که به ترتیب، برای کنترل وضعیت سرریز افقی و سرریز عمودی کاربرد دارند. در واقع، اگر یک مقدار برای پراپرتی overflow تعیین کنیم، این مقدار برای هر دو پراپرتی overflow-x و overflow-y در نظر گرفته می‌شود اما اگر دو مقدار به این پراپرتی اختصاص دهیم، مقدار اول برای overflow-x و مقدار دوم برای overflow-y در نظر گرفته می‌شود. بنابراین، در کد زیر، قاعده‌ی اول با دو قاعده‌ی بعدی معادل است:

CSS

overflow: hidden scroll;

overflow-x: hidden;
overflow-y: scroll;