جلسه ۴۴ – خاصیت overflow در CSS

منظور از خارج از باکس چیست ؟ منظور از Overflow چیست ؟ چطور از اورفلو استفاده کنیم؟ چطور بخش های خارجی صفحه را محو کنیم؟

خاصیت overflow، می‌تونه محدوده ی محتوای داخل یه عنصر رو کنترل کنه و نزاره که محتوا از عنصر پدر، بیرون بزنه. در این مقاله می‌خواهیم در رابطه با Overflow صحبت کنیم.

مقادیر خاصیت overflow

در فصل قبل با مفهوم فلکس باکس و گرید آشنا شدیم و تفاوت Grid با Flexbox را نیز بررسی کردیم. این خاصیت، چهار مقدار زیر رو قبول می کنه:

• visible
• hidden
• scroll
• auto

حالا به تشریح کاربرد هرکدوم از مقادیر بالا می پردازیم.

مقدار visible

مقدار visible، مقدار پیش فرضی هست که خاصیت overflow مختص به هر عنصر داره و طبق اون، محتوای یک عنصر، محدود به ابعاد عنصر مورد نظر نیست.

به عبارتی، اگه ابعاد عنصر کوچیک بشه، محتوای عنصر کوچیک نمیشه و از محدوده عنصر خارج می‌شه.

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

<div id="parent">
   <img src="flower.jpg">
   <span> <!-- متن لورم اپسوم --> </span>
</div>

#parent{
   width:200px;
   height:200px;
   border:2px solid gray;
   overflow: visible;
}

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

درواقع استفاده از مقدار visible، فرقی با زمانی که از خاصیت overflow استفاده نکنیم، نداره.

نکته: محتوایی که از عنصر پدر بیرون میزنه، تاثیری رو جابه جایی عناصر دیگه نداره.

مقدار hidden

وظیفه مقدار hidden، همونطور که از اسمش پیداس، پنهان کردن بیرون زدگی محتوا از عنصر پدر هست.

کد CSS مثال فوق رو به شکل زیر تغییر می‌دیم:

#parent{
   width:200px;
   height:200px;
   border: 2px solid gray;
   overflow: hidden;
}

میبینیم که نتیجه زیر حاصل میشه:

کاربرد این مقدار، زمانی هست که ما نمیخوایم محتوا به صورت کامل برای کاربر به نمایش دربیاد.

برای همین به خلاصه ای از اون محتوا بسنده می‌کنیم و توسط یه لینک، کاربر رو برای مطالعه کامل محتوا راهنمایی می‌کنیم.

مقدار scroll

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

بیاین کد رو تغییر بدیم:

#parent{
   width:200px;
   height:200psx;
   border: 2px solid gray;
   overflow: scroll;
}

نتیجه:

میبینیم که به خاطر عرض بالای عکس، و ارتفاع متن، در راستای افقی و عمودی، scroll bar به وجود اومده.

اگه براتون ابهام یا سوالی در مورد مطالب پیش اومد، حتما در قسمت نظرات بیان کنین. ما پاسخگو هستیم 🙂

مقدار auto

این مقدار شباهت زیادی به مقدار scroll داره، با این تفاوت که قابلیت اسکرول رو تنها زمانی به وجود میاره که بهش نیاز داریم.

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

#parent1{
   width:200px;
   height:200psx;
   border: 2px solid gray;
   overflow: auto;
}

#parent2{
   width:200px;
   height:200psx;
   border: 2px solid gray;
   overflow: auto;
}

هردوی عناصر پدر بالا،‌دارای دستور overflow:auto هستن. اما همونطور که میبینیم، تو عنصر دوم با محتوای کمتری سر و کار داریم.

به همین خاطر، قابلیت اسکرول برای عنصر دوم به وجود نیومده.

اسکرول افقی و اسکرول عمودی

تو مثال هایی که باهم دیدیم، خاصیت overflow هم در راستای افقی تاثیر میذاشت و هم در راستای عمودی.

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

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

ما نمیخوایم زمانی که از دستور overflow:hidden استفاده می کنیم، بیرون زدگی افقی پنهان بشه، و فقط میخوایم در راستای عمودی این اتفاق بیفته.

چی کار کنیم؟ کافیه از خاصیت های overflow-x و overflow-y استفاده کنیم.

تو مثال زیر، کدی نوشتیم که به ما کمک می کنه اسکرول در راستای افقی رو حذف کنیم و به جاش، اسکرول عمودی رو فعال کنیم:

#parent{
   width:200px;
   height:200px;
   border: 2px solid gray;
   overflow-y: scroll;
   overflow-x: hidden;
}

پایان ترم

سوال:

به کد زیر و نتیجه اون دقت کنین:

<div id="container">
   ...
</div>

div#container{
   width:200px;
   height:200px;
   border: 2px solid gray;
   background-color:#adadad;
   padding:10px;
   font-family: sans-serif;
}

توسط چه کدی، می‌تونیم یک اسکرول بار عمودی، برای متن مورد نظر به وجود بیاریم تا بیرون نزنه؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

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

این خاصیت ۴ مقدار اصلی رو قبول می‌کنه که عبارتند از :

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

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

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

مدیر محتوا: علی اسمعیلی‌