يتيح التمرير للمستخدمين عرض صفحات الويب / المستندات الطويلة لليسار واليمين أو لأعلى ولأسفل. يمكن إجراؤه عن طريق إضافة أشرطة تمرير أفقية ورأسية حسب المحتوى. يتم تعيين أبعاد شريط التمرير مثل الارتفاع والعرض بشكل افتراضي. ومع ذلك ، يمكن تخصيصها بمساعدة طرق JavaScript المرتبطة بها. بمجرد إضافتها أو تعيينها في المستند ، يمكن للمستخدم التعرف عليها بسهولة باستخدام ' انتقل أعلى () '، و ال ' انتقل إلى اليسار () ' طُرق.
يشرح هذا المنشور الغرض من طريقة 'scrollLeft ()' ووظائفها في jQuery.
ما هي طريقة 'scrollLeft ()' في jQuery؟
ال ' انتقل إلى اليسار () 'تم تصميم طريقة' شريط التمرير الأفقي 'خصيصًا لضبط واسترداد موضعه بالبكسل. يحسب موضع شريط تمرير عنصر HTML المحدد. يتم تطبيقه في الغالب على عناصر div والحاوية والقسم.
بناء الجملة (ضبط موضع شريط التمرير الأفقي)
$ ( محدد ) .scrollLeft ( موضع )
تأخذ الصيغة أعلاه قيمة العدد الصحيح على أنها ' موضع 'لتعيين موضع شريط التمرير الأفقي للمحدد المستهدف.
بناء الجملة (الحصول على موضع شريط التمرير الأفقي)
$ ( محدد ) .scrollLeft ( )
يقوم بناء الجملة هذا بإرجاع قيمة وسيطة 'الموضع' للمحدد بالبكسل.
دعونا نستخدم الطريقة المحددة عمليا.
كود HTML
أولاً ، ألق نظرة على كود HTML المذكور:
< قسم أسلوب = 'الارتفاع: 150 بكسل ؛ العرض: 200 بكسل ؛ الهامش: تلقائي ؛ الحد: 2 بكسل أسود خالص ؛ الفائض: تلقائي ؛مسافة بيضاء: nowrap ؛ ' >
< h2 > مرحبًا بك في Linuxhint ! h2 >
قسم >
< زر > تعيين الموقف زر >
في سطور التعليمات البرمجية أعلاه:
- ال ' <القسم> تحتوي العلامة 'على قسم داخل مستند HTML مخصص بمساعدة السمة' style '.
- داخل القسم الذي تم إنشاؤه ، 'العلامة تحدد العنوان الفرعي.
- أخيرًا ، ' <زر> ”تضيف زرًا.
ملحوظة: اتبع كود HTML المحدد في جميع أمثلة هذا المنشور.
مثال 1: تطبيق طريقة 'scrollLeft ()' لتعيين موضع شريط التمرير (أفقي)
يستخدم هذا المثال طريقة 'scrollLeft ()' لتعيين شريط التمرير (أفقيًا) في الموضع المحدد.
كود jQuery
اتبع كود jQuery المحدد:
< النصي src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > النصي >< النصي >
$ ( وثيقة ) .مستعد ( وظيفة ( ) {
$ ( 'زر' ) .انقر ( وظيفة ( ) {
$ ( 'قسم' ) .scrollLeft ( خمسون ) ؛
} ) ؛
} ) ؛
النصي >
في مقتطف الشفرة هذا:
- أولاً ، حدد مسار CDN لمكتبة jQuery في '