cssblog.ir logo
P

overflow

نمایش یا جلوگیری از نمایش اسکرول بارها

مشخصه بسیار مهم و کاربردی overflow در تعیین وضعیت سرریز محتوا از نظر نمایش یا عدم نمایش و همچنین نمایش اسکرول‌بار کاربرد دارد

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

یک نمونه اسکرول:

مشخصه overflow

در دنیای CSS مشخصه ای که برای تعیین رفتار مربوط به سَرریز محتوا در نظر گرفته شده،overflow نام دارد که با استفاده از آن می توانیم تعیین کنیم که :

۱- چه مواقعی اسکرول افقی/عمودی/هردو مشاهده شود

۲- وضعیت دیدن شدن/نشدن سرریز محتوا

مقادیر overflow

visible

این مقدار بیان می‌کند که سرریز صورت گرفته کاملا نمایان باشد و هیچ عملی در مورد آن انجام نشود.

hidden

یعنی سرریز دیده نشود. محتوا تا جایی که امکان آن وجود داشته باشد (فضا باشد) دیده خواهد شد.

scroll

یعنی اسکرول داشته باشد. مابقی محتوا با انجام عمل اسکرول مشاهده خواهد شد.

div {
	overflow: scroll;
}


auto

بصورت خودکار و توسط مرورگر تشخیص داده شود. در این حالت اگر نیاز باشد مرورگر نوارهای اسکرول (scrollbars) را نمایش خواهد داد. این ویژگی باعث حل‌شدن مشکل نمای اسکرول بارهای خالی در هنگامی که نیازی به آنها نیست، خواهد شد.  

 برای مشاهده نحوه عملکرد مقدار auto روی دکمه افزودن در مثال فوق کلیک کنید تا ارتفاع محتویات عنصر دارای overflow به میزانی برسد که نیاز به نمایش اسکرول‌بار باشد. 

initial

از مقدار پیشفرض استفاده شود. (مقدار پیشفرض = visible)

inherit

از والد خود به ارث می برد. یعنی مقدار overflow والد هرچیزی که باشد عناصر فرزند نیز مانند آن عمل خواهند کرد. 

نکته مهم درباره رابطه ارتفاع و اسکرول

بخاطر داشته باشید که اگر محتوا طوری باشد که عرض یا ارتفاع داینامیک داشته باشد، باعث اسکرول گرفتن والد نخواهد شد. مثلا تصویری که عرض ۱۰۰٪ درصد حداکثر به اندازه والد خود عرض خواهد داشت و باعث اسکرول افقی نخواهد شد. همچنین متن‌ها نیز در حالت عادی (بدون استفاده از مشخصه white-space) در هنگام کم بودن فضا، شکسته شده و به چند خط تقسیم می شوند. با افزایش تعداد خطوط نیز در حالت عادی ارتفاع عنصر افزایش یافته و اسکرول عمودی نخواهد گرفت مگر اینکه ارتفاع بطور مشخص تعیین شده باشد.

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

مشخصه‌های overflow-x & overflow-y

دو مشخصه دیگر با نام های overflow-xو overflow-yوجود دارند که کنترل بیشتری به ما از جهت سرریز می‌دهند. برای مثال اگر می‌خواهیم فقط سرریز عمودی اسکرول داشته باشد و سرریز افقی مخفی باقی بماند.

مثال:

.container {
	overflow-x: hidden;
	overflow-y: auto;
}

استفاده در کنار float

مشخصهoverflow یک رفتار جانبی دارد که گاهی اوقات از آن پس از استفاده از مشخصه float به نوعی در نقش clearکننده (مانند مشخصه clear) استفاده می شود. (اطلاعات بیشتر درباره clear و  float)

در مثال زیر با کلیک روی چک‌باکس می‌توانید به عنصری که فرزندان آن float دارند، overflow: hiddenدهید و تاثیر آن را مشاهده کنید.

 

البته توصیه می شود که از همان روشهای clearfix و مشخصهclear برای انجام چنین کاری استفاده شود زیرا تغییرoverflow ممکن است پیامدهای ناخواسته ای نیز بهمراه داشته باشد همچنین چندان روش استانداردی برای انجام این کار نیست.

ایجاد Context (زمینه) بلوکی جدید

نکته بسیار جالب درباره این مشخصه این است که استفاده از آن باعث بودن آمدن یک context بلوکی جدید خواهد شد که در داکیومنت های اصلی CSS به امر block formatting context گفته شده است. به بیان ساده تر استفاده ازoverflow با مقدار غیر ازvisible باعث خواهد شد تا عنصر دارایoverflow در کنار عنصری که دارایfloat است، قرار بگیرد.

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

یک نمونه اسکرول:

مشخصه overflow

در دنیای CSS مشخصه ای که برای تعیین رفتار مربوط به سَرریز محتوا در نظر گرفته شده،overflow نام دارد که با استفاده از آن می توانیم تعیین کنیم که :

۱- چه مواقعی اسکرول افقی/عمودی/هردو مشاهده شود

۲- وضعیت دیدن شدن/نشدن سرریز محتوا

مقادیر overflow

visible

این مقدار بیان می‌کند که سرریز صورت گرفته کاملا نمایان باشد و هیچ عملی در مورد آن انجام نشود.

hidden

یعنی سرریز دیده نشود. محتوا تا جایی که امکان آن وجود داشته باشد (فضا باشد) دیده خواهد شد.

scroll

یعنی اسکرول داشته باشد. مابقی محتوا با انجام عمل اسکرول مشاهده خواهد شد.

div {
	overflow: scroll;
}


auto

بصورت خودکار و توسط مرورگر تشخیص داده شود. در این حالت اگر نیاز باشد مرورگر نوارهای اسکرول (scrollbars) را نمایش خواهد داد. این ویژگی باعث حل‌شدن مشکل نمای اسکرول بارهای خالی در هنگامی که نیازی به آنها نیست، خواهد شد.  

 برای مشاهده نحوه عملکرد مقدار auto روی دکمه افزودن در مثال فوق کلیک کنید تا ارتفاع محتویات عنصر دارای overflow به میزانی برسد که نیاز به نمایش اسکرول‌بار باشد. 

initial

از مقدار پیشفرض استفاده شود. (مقدار پیشفرض = visible)

inherit

از والد خود به ارث می برد. یعنی مقدار overflow والد هرچیزی که باشد عناصر فرزند نیز مانند آن عمل خواهند کرد. 

نکته مهم درباره رابطه ارتفاع و اسکرول

بخاطر داشته باشید که اگر محتوا طوری باشد که عرض یا ارتفاع داینامیک داشته باشد، باعث اسکرول گرفتن والد نخواهد شد. مثلا تصویری که عرض ۱۰۰٪ درصد حداکثر به اندازه والد خود عرض خواهد داشت و باعث اسکرول افقی نخواهد شد. همچنین متن‌ها نیز در حالت عادی (بدون استفاده از مشخصه white-space) در هنگام کم بودن فضا، شکسته شده و به چند خط تقسیم می شوند. با افزایش تعداد خطوط نیز در حالت عادی ارتفاع عنصر افزایش یافته و اسکرول عمودی نخواهد گرفت مگر اینکه ارتفاع بطور مشخص تعیین شده باشد.

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

مشخصه‌های overflow-x & overflow-y

دو مشخصه دیگر با نام های overflow-xو overflow-yوجود دارند که کنترل بیشتری به ما از جهت سرریز می‌دهند. برای مثال اگر می‌خواهیم فقط سرریز عمودی اسکرول داشته باشد و سرریز افقی مخفی باقی بماند.

مثال:

.container {
	overflow-x: hidden;
	overflow-y: auto;
}

استفاده در کنار float

مشخصهoverflow یک رفتار جانبی دارد که گاهی اوقات از آن پس از استفاده از مشخصه float به نوعی در نقش clearکننده (مانند مشخصه clear) استفاده می شود. (اطلاعات بیشتر درباره clear و  float)

در مثال زیر با کلیک روی چک‌باکس می‌توانید به عنصری که فرزندان آن float دارند، overflow: hiddenدهید و تاثیر آن را مشاهده کنید.

 

البته توصیه می شود که از همان روشهای clearfix و مشخصهclear برای انجام چنین کاری استفاده شود زیرا تغییرoverflow ممکن است پیامدهای ناخواسته ای نیز بهمراه داشته باشد همچنین چندان روش استانداردی برای انجام این کار نیست.

ایجاد Context (زمینه) بلوکی جدید

نکته بسیار جالب درباره این مشخصه این است که استفاده از آن باعث بودن آمدن یک context بلوکی جدید خواهد شد که در داکیومنت های اصلی CSS به امر block formatting context گفته شده است. به بیان ساده تر استفاده ازoverflow با مقدار غیر ازvisible باعث خواهد شد تا عنصر دارایoverflow در کنار عنصری که دارایfloat است، قرار بگیرد.

آیا امکان استایل دادن به نوارهای اسکرول ها وجود دارد؟

گفته می شود که در نسخه های قدیمی IE (بله درست است!) مانند نسخه ۵.۵ این امکان وجود داشته اما در نسخه های بعدی این امکان برداشته است. همچنین امکان استایل دادن در مرورگرهای با پایه webkit در حال حاضر وجود دارد اما اگر به دنبال روشی cross-browser باشید (که احتمالا این چنین است) باید به سراغ راه حل های جاوا اسکریپتی بروید.

ass="s1">آیا امکان استایل دادن به نوارهای اسکرول ها وجود دارد؟

گفته می شود که در نسخه های قدیمی IE (بله درست است!) مانند نسخه ۵.۵ این امکان وجود داشته اما در نسخه های بعدی این امکان برداشته است. همچنین امکان استایل دادن در مرورگرهای با پایه webkit در حال حاضر وجود دارد اما اگر به دنبال روشی cross-browser باشید (که احتمالا این چنین است) باید به سراغ راه حل های جاوا اسکریپتی بروید.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند