آرین تاپ لرن

تاریخ انتشار:۱۲:۴۲ ۱۳۹۹/۷/۵

با استفاده از  صفت overflow میتوان محتوای اضافه را چید و یا نوار پیمایشی به یک عنصر اضافه کرد تا بتوان محتوای اضافه را با پیمایش مشاهده نمود .

صفت overflow دارای چهار مقدار زیراست :

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

نکته : صفت overflow تنها برای عناصر block که دارای ارتفاع مشخص هستند کار میکند.

---

overflow: visible

به صورت پیشفرض صفت overflow دارای مقدار visible است و این به این معناست که محتوای اضافی چیده نمیشود و خارج از باکس عنصر مورد نظر نمایش داده میشود :

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

 }  div
 ; width : 200px
 ; height : 50px
 ; background-color : #eee
 ; overflow : visible
 {

---

overflow: hidden

زمانی که صفت overflow را با مقدار hidden مقدار دهی میکنیم، محتوای اضافی چیده میشود و آن قابل نمایش برای کاربر نیست :

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

 

 }  div
 ; overflow : hidden
 {

---

overflow: scroll

تنظیم صفت overflow با مقدار scroll به این معناست که محتوای اضافی چیده میشود و یک نوار پیمایش به صفحه اضافه خواهد شد که بتوان این محتوای اضافه را مشاهده نمود. دقت داشته باشید که در اینجا نوار پیمایش افقی و عمودی هر دو به عنصر اضافه خواهند شد حتی اگر شما به آنها احتیاج نداشته باشید.

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

 

 }  div
 ; overflow : scroll
 {

---

overflow: auto

مقدار auto بسیار شبیه مقدار scroll است. تنها تفاوت این است که نوار های پیمایش در صورت نیاز به عنصر اضافه خواهند شد :

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

 }  div
 ; overflow : auto
 {

---

overflow-x و overflow-y

از صفات overflow-x و overflow-y برای مشخص کردن چیده شدن و یا چیده نشدن محتوای اضافی فقط در یک راستا (افقی و یا عمودی) استفاده میشود.

• overflow-x مشخص میکند که با محتوای اضافه در لبه های راست و چپ عنصر چکار باید کرد.
• overflow-y مشخص میکند که با محتوای اضافه در لبه های بالا و پایین عنصر چکار باید کرد.

 }  div
 /* overflow-x : hidden ;  /* Hide horizontal scrollbar
 /* overflow-y : scroll ;  /* Add vertical scrollbar
 {

 

منبع:learnsource