ویژگی overflow در زبان CSS

ویژگی overflow چیست؟

در زبان CSS، ویژگی ای به نام overflow وجود دارد. کار این ویژگی محدود کردن محتوای یک صفحه است تا از حد خودش تجاوز نکند؛ به طوری که اگر محتوای مورد نظر ما (مثلا چند پاراگراف متنی) از محدوده ی خودش خارج شود این دستور آن را درون محدوده ی خودش قرار داده و برای دیده شدن کامل مطلب به آن محدوده اسکرول بار اضافه می کند. به مثال زیر نگاه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
#overflowTest {
  background: #4CAF50;
  color: white;
  padding: 15px;
  width: 50%;
  height: 100px;
  overflow: scroll;
  border: 1px solid #ccc;
}
</style>
</head>
<body>

<div id="overflowTest">This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</div>

</body>
</html>

مشاهده ی خروجی در JSBin

در این مثال متنی طولانی را انتخاب کرده ایم ولی محدوده ی نگه دارنده اش را کوچک کرده ایم. سپس با استفاده از ویژگی overflow آن را در همان محدوده قرار داده و برایش اسکرول بار گذاشته ایم. البته شما می توانید با مقادیر دیگر دستور overflow کار های دیگری نیز بکنید. مقادیر مجاز برای overflow از این قرار اند:

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

نکته: ویژگی overflow تنها برای عناصر Block ای کار می کند که ارتفاع (height) آن ها مشخص شده باشد.

بیایید مثال هایی را از هر کدام از این مقادیر ببینیم.

حالت visible

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: visible;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:</p>

<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

</body>
</html>

مشاهده ی خروجی در JSBin

حالت hidden

hidden در لغت به معنی «مخفی» است. در این حالت اگر محتوای عنصر از حد خودش بیشتر شود، قسمت اضافی برش می خورد و دیگر نمایش داده نمی شود. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: hidden;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>With the hidden value, the overflow is clipped, and the rest of the content is hidden:</p>

<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

  <p dir='rtl'>ویژگی overflow را از کد ها حذف کنید تا متوجه تفاوت آن با حالت عادی بشوید.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

ویژگی scroll

ویژگی scroll برایش مهم نیست که محتوا از حد خود تجاوز کرده است یا خیر بنابراین چه نیاز باشد و چه نباشد، یک اسکرول بار افقی و یک اسکرول بار عمودی به آن قسمت اضافه می کند:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow: scroll;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>Setting the overflow value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it):</p>

<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

</body>
</html>

مشاهده ی خروجی در JSBin

در مثال بالا می بینید، با اینکه نیازی به اسکرول افقی نیست اما ان را هم اضافه کرده است. در واقع حتی اگر متن ما کوچک بود باز هم هر دو اسکرول اضافه می شدند.

ویژگی auto

حالت auto بسیار شبیه به مقدار scroll است با این تفاوت که کمی هوشمند تر است و تنها زمانی اسکرول بار ها را اضافه می کند که واقعا نیازی به آن ها باشد (چه عمودی و چه افقی).

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: auto;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>The auto value is similar to scroll, only it add scrollbars when necessary:</p>

<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که در این مثال مشاهده می کنید تنها اسکرول عمودی را داریم و از اسکرول افقی خبری نیست.

سوال: اگر بخواهیم تنها در حالت افقی یا عمودی اسکرول اضافه کنیم چه کار باید بکنیم؟

پاسخ: شما می توانید از دستور overflow-x برای اضافه کردن اسکرول بار در محور افقی و overflow-y برای اضافه کردن آن در محور عمودی استفاده کنید:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>You can also change the overflow of content horizontally or vertically.</p>

<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

</body>
</html>

مشاهده ی خروجی در JSBin

در این صورت می توانیم برای محور های عمودی و افقی به صورت جداگانه اسکرول تعریف کنیم.

امیدوارم از این قسمت لذت برده باشید.