عجلة scrollbar : كيفية استخدام العجلة في CSS

نحتاج أحيانًا إلى وضع نص كبير داخل الصفحة ، وبما أن كتابة النصوص تعتمد على كتابتها لتنتقل إلى سطر جديد ، كان علينا إخفاء النص والتحكم في نزوله من خلال شريط التمرير ، وقد وفرت لنا CSS هذا الأمر الأكثر روعة أداة لاستخدامها في صفحة HTML الخاصة بنا.

 

تعريف

يتم تعريف شريط التمرير (عجلة scrollbar)  واستخدامه على النحو التالي:

overflow-x:hidden;

حيث يكون التركيز على وصول إحداثيات x إلى حدود العلامة المستخدمة في HTML ، وعندما يحدث الاتصال ، سينخفض ​​النص تلقائيًا مع تنشيط عجلة التمرير ، والتي تظهر غالبًا على الجانب الأيمن.

 

فوائد عجلة scrollbar

سنذكر فوائد استخدام شريط التمرير على صفحتنا وهي:

  • وضع العناصر وإجبارها على عدم الخروج من العلامات.
  • زيادة محتوى صفحة الويب الخاصة بنا بشكل غير مخفي ، مما يمنح الزائرين خيار إظهار النصوص أو تجاهلها.
  • حافظ على تصميم جميل ومتسق للصفحة وساعد في الاختيار المتعدد.
  • القيام بتضمين عدد كبير جدًا من الروابط الواردة على الصفحة لإجبار الزوار على البقاء في الموقع.
  • تضمين شريط التمرير في أي محتوى HTML من أي نوع.
  • شريط تمرير محتوى متعدد تحت شريط تمرير الصفحة الرئيسية.

 

مثال

من فضلك ، لفهم شريط التمرير CSS جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

div{
    width:200px;
    height:400px;
    padding:10px;
    background-color:#EEE;
    border: 1px solid #CCC;
    overflow-x:hidden;
}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS scrollbar Overflow</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>
            1.This is Our main line first long sentences This is Our main line first long sentences<br/>
            2.This is Our main line first long sentences This is Our main line first long sentences<br/>
            3.This is Our main line first long sentences This is Our main line first long sentences<br/>
            4.This is Our main line first long sentences This is Our main line first long sentences<br/>
            5.This is Our main line first long sentences This is Our main line first long sentences<br/>
            6.This is Our main line first long sentences This is Our main line first long sentences<br/>
            7.This is Our main line first long sentences This is Our main line first long sentences<br/>
            8.This is Our main line first long sentences This is Our main line first long sentences<br/>
        </div>
    </body>

</html>