آموزش CSSآموزش طراحی سایت

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

چطوری اعمالی خارج از باکس هامون انجام بدیم؟

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

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

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

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

  • visible
  • hidden
  • scroll
  • auto

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

مقدار visible

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

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

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

استفاده از overflow: visible در CSS

<div id="parent">
   <img src="flower.jpg">
   <span> <!-- متن لورم اپسوم --> </span>
</div>
#parent{
   width:200px;
   height:200px;
   border:2px solid gray;
   overflow: visible;
}

overflow: visible

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

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

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

مقدار hidden

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

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

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

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

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

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

مقدار scroll

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

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

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

نتیجه:

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:auto هستن. اما همونطور که میبینیم، تو عنصر دوم با محتوای کمتری سر و کار داریم.

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

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

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

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

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

بیرون زدگی محتوا از عنصر پدر

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

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

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

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

استفاده از overflow-x و overflow-y برای کنترل بیرون زدگی

پایان ترم

سوال:

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

<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، فقط در راستا های عمودی و افقی استفاده کنیم.

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

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

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

‫2 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


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

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر