تشاهدون الآن:
	موضوع:طريقة إضافة مربع تمرير.
	سلسلة:[أكواد مهمة للمدونين]
	نبذة:كود مربع تمرير وخصائصه
	الصنف:دروس,أكواد,جافاسكريبت,بلوجر

قد نكون في بعض الأحيان بحاجة لإضافة الأكواد داخل المواضيع أو ما شابه ذلك لذلك من المستحسن أن نفصل تلك الأكواد عن الموضوع.

من أجل ذلك نستعمل مربع تمرير وهو عبارة عن مربع أو مساحة تفصل موضوع عن آخر داخل نفس الصفحة ويمكن التحكم في كل عناصره التكوينية من  لون الخلفية والمحاذاة و الطول و العرض ...إلخ.

مربع تمرير:

الآن لإضافة مربع تمرير أنسخ الكود التالي داخل الموضوع بعد الإنتقال إلى وضع html

<div style="background-color: #e1f0f0; border: 1px solid black; height: 200px; overflow-x: hidden; overflow-y: scroll;">
<div>
<br/>


اكتب هنا


<br />
<br /></div>
</div>
<div style="font-size: 10px;">
</div>

النتيجة:

اكتب هنا

العناصر التكوينية:

طول المربع:

لتغيير طول المربع نغير القيمة الموجودة بجانب  : height:20px أو height:100% .

عرض المربع:

لتغيير عرض المربع نغير القيمة الموجودة بجانب : width:20px أو width:100% .
شريط التمرير:
في مثالنا السابق إستعملنا شريط تمرير عمودي فقط و العنصر المسؤول عن ذلك هو 

overflow-y: scroll;

أما إذا  أردنا أن  نضيف شريط تمرير أفقي نستعمل العنصر

overflow-x: scroll;

لإخفاء أحد الأشرطة نستعمل القيمة hidden مكان  القيمة scroll  والعكس إذا أردنا إظهارها.
في حال أردنا إظهار الشريطين معاً يمكن إستعمال العنصر overflow مباشرةً مكان العنصرين overflow-y و overflow-x .

 المحاذاة:

 وهي حدود مربع التمرير والهدف منها إيضاح الخط الفاصل بين المربع والصفحة
العنصر المسؤول على ذلك هو border: 1px solid black ويتكون من 3 قيم هي بالترتيب سمك الحد ونوعه ولونه

 1px : يمثل سمك الحد
solid : يمثل نوع الخط ويوجد أيضاً كل من :

 Inset, Outset, Ridge, double, groove, dotted, dashed 

لكم أن تكتشفوها  بأنفسكم وسنعود إليها لاحقاً بالتفصيل.

black : يمثل لون الحد و يمكن تغييره إما بكتابة الألوان بالإنجليزية [green،orange،white،red،blue] أو عبر الأكواد RRGGBB# حيث RRGGBB هي مجموعة  أرقام بين 0-9 و حروف بين a-f

 الخلفية:

ببساطة هو لون خلفية مربع التمرير و ذلك حتى يختلف لونه عن لون الصفحة.

العنصر المسؤول على ذلك هو background بحيث إذا أردنا إضافة ألوان نستعمل background-color:#RRGGBB  أما إذا أردنا إضافة صورة كخلفية نستعمل

background:url ('متبوع بلينك الصورة')  

ملاحظات:
1. px تعني أن الوحدة هي البيكسل.
2.  % تعني أن الوحدة هي النسبة المئوية
3. العنصر width غير موجود هنا لأنه يأخذ القيمة 100%
4. لحذف العناصر ماعليك سوى حذف الكود المسؤول على ذلك
5. لإضافة العناصر ما عليك سوى إضافة الكود المسؤول على ذلك.