الفرق بين المراجعتين لصفحة: «CSS/overflow-y»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>overflow-y</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>overflow-y</code>}}</noinclude> | ||
الخاصية <code>overflow-y</code> في CSS تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي فوقه أو تحته.<syntaxhighlight lang="css"> | الخاصية <code>overflow-y</code> في CSS تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي فوقه أو تحته. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | |||
|- | |||
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]] | |||
|<code>visible</code> | |||
|- | |||
! scope="row" |تُطبَّق على | |||
|عناصر <code>block-level</code> و <code>inline-block</code> غير المُستبدَلة (non-replaced). | |||
|- | |||
! scope="row" |قابلة للوراثة | |||
|لا | |||
|- | |||
!قابلة للتحريك | |||
|لا | |||
|- | |||
! scope="row" |القيمة المحسوبة | |||
|كما حُدِّدَت. | |||
|}<syntaxhighlight lang="css"> | |||
/* لن يتم اقتصاص المحتوى */ | /* لن يتم اقتصاص المحتوى */ | ||
overflow-y: visible; | overflow-y: visible; | ||
| سطر 19: | سطر 39: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
| سطر 58: | سطر 60: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل هذه الخاصية قيمةً واحدةً هي كلمةٌ محجوزةٌ من الكلمات المذكورة أدناه. | تقبل هذه الخاصية قيمةً واحدةً هي كلمةٌ محجوزةٌ من الكلمات المذكورة أدناه. | ||
=== | === <code>visible</code> === | ||
لن يتم اقتصاص المحتوى، لكن يمكن أن يُعرَض خارج صندوق المحتوى التابع للعنصر. | لن يتم اقتصاص المحتوى، لكن يمكن أن يُعرَض خارج صندوق المحتوى التابع للعنصر. | ||
=== | === <code>hidden</code> === | ||
سيتم اقتصاص المحتوى، ولن يعرض المتصفح شريط تمرير. | سيتم اقتصاص المحتوى، ولن يعرض المتصفح شريط تمرير. | ||
=== | === <code>scroll</code> === | ||
سيتم اقتصاص المحتوى، وستعرض المتصفحات أشرطة تمرير سواءً تم اقتصاص المحتوى أم لا، وهذا يجعلنا نتفادى مشكلة ظهور واختفاء شريط التمرير في الصفحات الديناميكية. | سيتم اقتصاص المحتوى، وستعرض المتصفحات أشرطة تمرير سواءً تم اقتصاص المحتوى أم لا، وهذا يجعلنا نتفادى مشكلة ظهور واختفاء شريط التمرير في الصفحات الديناميكية. | ||
لاحظ أنَّ الطابعات قد تطبع المحتوى الذي يزيد عن صندوق المحتوى. | لاحظ أنَّ الطابعات قد تطبع المحتوى الذي يزيد عن صندوق المحتوى. | ||
=== | === <code>auto</code> === | ||
ترك الخيار بيد البرمجية التي تُعالِج المستند، فمثلًا ستعرض متصفحات الحواسيب شريط تمرير إن تجاوز المحتوى صندوق المحتوى. | ترك الخيار بيد البرمجية التي تُعالِج المستند، فمثلًا ستعرض متصفحات الحواسيب شريط تمرير إن تجاوز المحتوى صندوق المحتوى. | ||
| سطر 73: | سطر 75: | ||
overflow-y: visible | hidden | scroll | auto; | overflow-y: visible | hidden | scroll | auto; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* صفحة الخاصية <code>[[CSS/overflow|overflow]]</code> وصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي: <code>[[CSS/overflow-x|overflow-x]]</code>. | |||
* صفحة الخاصية <code>[[CSS/position|position]]</code> التي تصف كيف يجب أن يتموضع العنصر في المستند. | |||
* صفحة كل من الخاصيات <code>[[CSS/width|width]]</code>، و <code>[[CSS/bottom|height]]</code> المسؤولة عن تحديد أبعاد العنصر. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-overflow-3/#propdef-overflow-y CSS Overflow Module Level 3]. | * مواصفة [https://drafts.csswg.org/css-overflow-3/#propdef-overflow-y CSS Overflow Module Level 3]. | ||
* مواصفة [https://drafts.csswg.org/css-box-3/#overflow-y CSS Basic Box Model]. | * مواصفة [https://drafts.csswg.org/css-box-3/#overflow-y CSS Basic Box Model]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Box Model]] | [[تصنيف:CSS Box Model|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 19:28، 24 يوليو 2018
الخاصية overflow-y في CSS تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي فوقه أو تحته.
بطاقة الخاصية
| القيمة الابتدائية | visible
|
|---|---|
| تُطبَّق على | عناصر block-level و inline-block غير المُستبدَلة (non-replaced).
|
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
/* لن يتم اقتصاص المحتوى */
overflow-y: visible;
/* سيتم اقتصاص المحتوى دون عرض شريط تمرير */
overflow-y: hidden;
/* سيتم اقتصاص المحتوى مع عرض شريط تمرير */
overflow-y: scroll;
/* ترك الأمر بيد المتصفح */
overflow-y: auto;
/* القيم العامة */
overflow-y: inherit;
overflow-y: initial;
overflow-y: unset;
أمثلة
راجع صفحة العنصر overflow لترى أثر استخدام مختلف القيم مع هذه الخاصية.
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 3.5 | 5.0 | 9.5 | 3.0 |
البنية العامة
تقبل هذه الخاصية قيمةً واحدةً هي كلمةٌ محجوزةٌ من الكلمات المذكورة أدناه.
visible
لن يتم اقتصاص المحتوى، لكن يمكن أن يُعرَض خارج صندوق المحتوى التابع للعنصر.
سيتم اقتصاص المحتوى، ولن يعرض المتصفح شريط تمرير.
scroll
سيتم اقتصاص المحتوى، وستعرض المتصفحات أشرطة تمرير سواءً تم اقتصاص المحتوى أم لا، وهذا يجعلنا نتفادى مشكلة ظهور واختفاء شريط التمرير في الصفحات الديناميكية.
لاحظ أنَّ الطابعات قد تطبع المحتوى الذي يزيد عن صندوق المحتوى.
auto
ترك الخيار بيد البرمجية التي تُعالِج المستند، فمثلًا ستعرض متصفحات الحواسيب شريط تمرير إن تجاوز المحتوى صندوق المحتوى.
البنية الرسمية
overflow-y: visible | hidden | scroll | auto;
انظر أيضًا
- صفحة الخاصية
overflowوصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي:overflow-x. - صفحة الخاصية
positionالتي تصف كيف يجب أن يتموضع العنصر في المستند. - صفحة كل من الخاصيات
width، وheightالمسؤولة عن تحديد أبعاد العنصر.
مصادر ومواصفات
- مواصفة CSS Overflow Module Level 3.
- مواصفة CSS Basic Box Model.