عمل سكرول بار للصفحة Scroll bar Style Css

عمل سكرول بار للصفحة Scroll bar Style Css

المستوي الثاني مبرمج مبتدئ


عندما يكون لديك جريد فيو او بيانات في صفحة وسوف تجعل من الصفحة شكلا سيئا بسبب كثرة البيانات لذلك تضع البيانات داخل سكرول بار في الصفحة

submit to reddit

عمل سكرول بار للصفحة Scroll bar Style Css

كيفية عمل سكرول بار للصفحة في الموقع make scoll for page in asp.net

نظرة عامة

نحتاج الي وضع سكرول بار من اجل تظبيط شكل الصفحة اذا كانت البيانات كبيرة وتخاف ان تخرج البيانات من جانب الصفحة او اسفل الصفحة لذلك تضع البيانات داخل سكرول بار للصفحة , مثلا لديك جريد فيو بها بيانات كثيرة وتريد ان تجعل شكل الصفحة متناسق مهما كثرت البيانات سواء علي الجانب للصفحة او بالطول .

كيف يحدث ذلك

نحتاج الي الاتي

1- وضع ديف Div وهي تاج مثل اي تاج في الهتمل ونضع بداخله بيانات او اي شئ لكي ننظم الشكل

2-عمل ستايل خاص للديف بجعله سكرول Div scroll

من خلال خاصية الارتفاع والعرض والسكرول Width,Hieght,OverFlow

3- وضع البيانات او اي شئ داخل هذا الديف Div

 

مثال للبيانات قبل السكرول

انا مبرمج سي شارب

انا مبرمج سي شارب

انا مبرمج سي شارب

انا مبرمج سي شارب

انا مبرمج سي شارب

انا مبرمج سي شارب



 

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

الان سننفذ طريقة السكرول

ضع البيانات داخل هذا الديف الذي يحتوي علي الستايل الذي يجعل الديف سكرول بار

<div style="width:300px; height:200px; overflow:scroll;">

هنا تضع اي شئ من البيانات 

 

</div>

 

وهذا نتيجة نهائية للسكرول

 

 

انا مبرمج سي شارب


انا مبرمج سي شارب


انا مبرمج سي شارب


انا مبرمج سي شارب


انا مبرمج سي شارب


انا مبرمج سي شارب


انا مبرمج سي شارب


انا مبرمج سي شارب