شريط تمرير إدخال النطاق العمودي: الاتجاه والتوافق

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

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

النهج الحديث

بالنسبة للإصدارات الحالية من Chrome وFirefox، الحل الأكثر كفاءة يتضمن استخدام خصائص وضع الكتابة والاتجاه:

input[type=range] {
    writing-mode: vertical-lr;
    direction: rtl;
}

يؤدي ضبط وضع الكتابة على الوضع الرأسي lr (أو العمودي rl) إلى قلب اتجاه الكتابة، بينما يضمن الاتجاه: rtl (من اليمين إلى اليسار) أن يؤدي التمرير لأعلى إلى تقليل القيمة، مع الالتزام بالاصطلاحات القياسية.

دعم المتصفحات القديمة

للإصدارات الأقدم من Chrome والإصدارات الأخرى المستندة إلى Chromium المتصفحات:

الإدخال[type=range] { المظهر: منزلق عمودي. العرض: 16 بكسل؛

input[type=range] {
    appearance: slider-vertical;
    width: 16px;
}

تطبيق المظهر: شريط التمرير العمودي يفرض الاتجاه الرأسي، ويتوافق تعيين عرض ثابت مع العرض الافتراضي المستخدم في المتصفحات الحديثة.

التوافق مع فايرفوكس

للإصدارات الأقدم من Firefox:

html { التوجه: عمودي.

html {
    orient: vertical;
}

تؤدي إضافة سمة الاتجاه إلى العنصر إلى تحفيز الاتجاه الرأسي لجميع أشرطة التمرير في الصفحة.

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