ویژگی overflow-y در css

ویژگی overflow-y در css تگ html خارج مرز بالا و پایین

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد خاصیت overflow-y در زبان css توضیحاتی را ارائه نماییم.

ویژگی کاربردی overflow-y در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

معرفی و کاربرد ویژگی overflow-y در زبان طراحی css

به کمک خاصیت overflow-y می توانیم نحوه نمایش محتوای عناصر html که خارج از مرز بالا و پایین افتادند، را تعیین نماییم.

نکات مهم

1. زمانی که ارتفاع یک تگ html بزرگتر از محتوا باشد، عنصر از مرز سمت بالا و پایین سر ریز می شود.
2. خصوصیت overflow-y تنها در تگ های html بلاک لول قابل استفاده است.
3. در صورتی که عنصر html ارتفاع ثابتی نداشته باشد، بزرگتر شدن محتوا در تگ html مربوطه منجر به سر ریز شدن محتوای عنصر نخواهد شد.
4. در صورتی که عنصر html ارتفاع ثابتی داشته باشد، بزرگتر شدن محتوا در تگ html مربوطه منجر به سر ریز شدن محتوای عنصر html درجهت بالا و پایین خواهد شد.
5. خصوصیت overflow-x جهت تعیین نحوه نمایش محتوای عناصر html که خارج از مرز چپ و راست افتادند، کاربرد دارد.

مقادیر صفت کاربردی overflow-y در زبان طراحی سی اس اس

صفت overflow-y که در زبان طراحی CSS3 معرفی شده است، 6 مقدار می پذیرد که عبارتند از:

1. مقدار visible
2. مقدار hidden
3. مقدار scroll
4. مقدار auto
5. مقدار initial
6. مقدار inherit

مقدار visible درون خاصیت overflow-y در زبان css

اگر خاصیت overflow-y را برای یک عنصر html برابر با مقدار visible قرار دهیم، در حقیقت می خواهیم مقدار پیش فرض خصوصیت برای افزایش محتوای عنصر html اعمال گردد. و منجر به سر ریز شدن محتوای تگ html از مرز بالا و پایین شود.

مقدار visible به عنوان مقدار پیش فرض خصوصیت overflow-y محسوب می شود.

[html] div{ overflow-y: visible; }[/html]

ویژگی overflow-y در css تگ html خارج مرز بالا و پایین

مقدار hidden درون خاصیت overflow-y در زبان سی اس اس

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

[html] div{ overflow-y: hidden; }[/html]

مقدار scroll درون خاصیت overflow-y در زبان css

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

[html] div{ overflow-y: scroll; }[/html]

مقدار auto درون خاصیت overflow-y در زبان سی اس اس

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

[html] div{ overflow-y: auto; }[/html]

مقدار initial درون خاصیت overflow-y در زبان css

اگر خاصیت overflow-y را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت overflow-y در زبان سی اس اس

اگر خاصیت overflow-y را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.

بررسی خاصیت overflow-y از نظر نسخه زبان طراحی css

ویژگی کاربردی overflow-y در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

بررسی ساختاری خصوصیت overflow-y در زبان طراحی سی اس اس

عناوین ساختاری خاصیت overflow-y	وضعیت ساختاری خاصیت overflow-y
مقدار پیش فرض	visible
قابلیت توارث	ندارد
قابلیت تحرک	ندارد
ورژن css صفت	CSS3
سینتکس صفت در جاوا اسکریپت	"object.style.overflowY="scroll

پشتیبانی مرورگرهای اینترنتی از خاصیت overflow-y در زبان طراحی css

خاصیت css
overflow-y	4.0	9.0	3.5	3.0	9.5