متصفحان يدخلان شريط التمرير بطريقة أو بأخرى ...

إن شريط التمرير (شريط التمرير) عبارة عن آلية بسيطة ولكنها فعالة تعمل كوسيلة أساسية يمكنك من خلالها عرض المستندات الكبيرة. لكن هذا ليس كل ما تستطيعه أشرطة التمرير! كما أن خبرات العمل المتواضعة هذه جيدة جدًا في إخبار المستخدمين بحجم المستندات التي يتفاعلون معها. نتيجة لذلك ، تحمل أشرطة التمرير حمولة مزدوجة. إنها تساعد في العمل مع مواد مختلفة ، وتُعلم المستخدم بحجم هذه المواد.

يمكن تغيير منطق أشرطة التمرير البسيط والمفهوم أثناء تنفيذ آليات التمرير. يحدث هذا عندما يتغير السلوك القياسي لشريط التمرير ، مما ينتهك مراسلات المستخدم المتوقعة بين طول المستند وارتفاع شريط التمرير.

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

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

إن المادة ، التي نُنشر ترجمتها اليوم ، مكرسة لبعض ميزات استخدام أشرطة التمرير في تطبيقات الويب.

بعض المصطلحات

قبل المتابعة - دعنا نحدد مصطلحين سنستخدمهما هنا. وهي ، نميز بين نوعين من أشرطة التمرير:

• أشرطة التمرير الثابتة (الاقتحامية) - تلك التي تشغل مساحة الشاشة. لا يتداخل المحتوى الذي تشاهده ، بل يجلس بجانبه.
• أشرطة تمرير غير ثابتة (غير مزعجة) - تلك التي تتداخل مع المحتوى. لا يسلبون مساحة الشاشة مما يوجد في الحاويات التي ينتمون إليها.

السلوك القياسي لأشرطة التمرير الحديثة

افتراضيًا ، تكون أشرطة تمرير iOS و Android غير مثبتة.

في نظام التشغيل MacOS (على وجه الخصوص ، نتحدث عن ملفات MACOS ذات الصلة في وقت كتابة هذه المادة) يتم إخفاء أشرطة التمرير حتى يبدأ العنصر في التمرير. هذا هو السلوك القياسي للنظام في الموقف عندما يكون الماوس غير متصل بالكمبيوتر. هناك ثلاثة خيارات لعرض أشرطة التمرير (يمكن العثور على الإعدادات المقابلة في General > System Preferences ).


إعدادات شريط التمرير في macOS Mojave

وقد تبين أن هذه الإعدادات تتحكم في سلوك أشرطة التمرير في Chrome و Firefox وفي Edge الجديد المستند إلى Chromium.

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


يكون شريط التمرير الثابت في نظام macOS مرئيًا دائمًا ويشغل بعض مساحة الشاشة


يتداخل شريط التمرير غير الثابت الخاص بـ MacOS مع المحتوى أثناء التمرير خلال مستند


يتم إخفاء شريط التمرير غير المثبت في نظام التشغيل MacOS في الوقت الحالي عندما لا يتم تمرير المستند

في Windows 10 ، من Settings > Display > Simplify and personalize Windows ، يمكنك العثور على إعدادات مماثلة.


إعدادات شريط التمرير في نظام التشغيل Windows 10

لسوء الحظ ، حتى عند Automatically hide scroll bars in Windows ، لا يؤثر ذلك على Firefox و Chrome و Internet Explorer و Edge. في حالة Edge ، نتحدث عن كل من متصفح المتصفح على أساس Chromium والبديل بناءً على EdgeHTML.

نظرة عامة على المهمة

إليك ما تبدو عليه الصفحة التي استعرضناها أعلاه على نظام التشغيل MacOS على نظام التشغيل Windows.


صفحة شريط التمرير لـ Windows

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

قد يجد المصممون الذين اعتادوا على بيئة macOS ، لكنهم يطورون تطبيقات الويب المصممة لأنظمة مختلفة ، صعوبة في جعل مشاريعهم تبدو جيدة في أنظمة تشغيل مختلفة ولا ينفقون الكثير من موارد النظام على التقديم.

متطلبات المشروع

نريد تطوير تطبيق ويب ، أشرطة التمرير المستخدمة والتي تختلف في الميزات التالية:

• يجب أن تبدو جذابة عند عرض الصفحات على نظام تشغيل سطح المكتب. هذا مهم بشكل خاص عند عرض الحاويات التي لا تتناسب محتوياتها تمامًا. يتم عرض أشرطة التمرير داخل هذه الحاويات ، مما يعني أن تصميم أشرطة التمرير هذه يجب أن يكون في اتفاق جيد مع تصميم الحاويات. نعتقد أنه في حالة أشرطة التمرير التي تسمح لك بالتمرير في الصفحة بأكملها ، فإن هذا ليس مهمًا للغاية ، لكن هذه بلا شك مسألة مثيرة للجدل.
• نريد تقليل مساحة الشاشة التي قد يشغلها شريط التمرير. في Windows ، تكون أشرطة التمرير ، بشكل افتراضي ، ثابتة وعريضة للغاية.
• نريد التركيز على إعدادات النظام. إذا حدد المستخدم خيارًا غير قياسي في الإعدادات التي تحدد سلوك أشرطة التمرير ، فسنحتاج إلى أخذ ذلك في الاعتبار كلما أمكن ذلك.
• نحن نسعى جاهدين لتجنب استخدام حلول جافا سكريبت الثقيلة (مثل البرنامج المساعد OverlayScrollbars اللطيف للغاية) ، المصمم للعمل مع أشرطة التمرير غير المثبتة. أنها تخلق حمولة كبيرة على أجهزة الكمبيوتر العميلة.

إلى أي مدى يمكنني الذهاب مع CSS؟

فيما يلي رمز عنصر الحاوية الذي تم تعيين فئة overflowing-element إليه ، وكذلك رمز CSS لتصميمه:

 <div class="overflowing-element"></div> .overflowing-element {  overflow-y: auto;  -webkit-overflow-scrolling: touch;  -ms-overflow-style: -ms-autohiding-scrollbar; } 

إذا كنت بحاجة إلى أشرطة تمرير غير مثبتة في Internet Explorer وفي Edge استنادًا إلى EdgeHTML ، فهذا يعني أن -ms-overflow-style: -ms-autohiding-scrollbar; . مع استخدامه ، سيعمل كل شيء كما يجب (إنه بسيط بما فيه الكفاية - أليس كذلك؟).

عندما خرج iOS 13 ، اتضح أن التمرير -webkit-overflow: قد لا تكون هناك حاجة إلى خاصية اللمس لتحسين فيزياء التمرير. على الرغم من أنك إذا كنت بحاجة إلى دعم الإصدارات القديمة من iOS ، فمن الأفضل عدم رفض استخدام هذه الخاصية.

إذا تحدثنا عن خصائص CSS المتعلقة بالتمرير ، فقد يكون من المفيد أن نقرأ عن خاصية سلوك الزائد . يسمح لك بالتحكم في سلوك النظام عند الوصول إلى حد العنصر الذي يدعم التمرير.

▍Firefox

يدعم متصفح Firefox خصائص CSS بدون بادئات. هذا هو لون شريط التمرير وعرض شريط التمرير .

يستخدم المثال التالي متغيرات CSS غير المدعومة في Internet Explorer 11 للوضوح:

 :root {  --scrollbar-track-color: transparent;  --scrollbar-color: rgba(0,0,0,.2);  --scrollbar-width: thin; /* or `auto` or `none` */ } .overflowing-element {  scrollbar-width: var(--scrollbar-width);  scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color); } 

▍ Chrome و Safari ومتصفح Edge المستندة إلى Chromium والمتصفحات الأخرى

تدعم المتصفحات المستندة إلى Webkit و Blink العناصر الزائفة المخصصة المصممة لتخصيص أشرطة التمرير:

 :root {  --scrollbar-track-color: transparent;  --scrollbar-color: rgba(0,0,0,.2);  --scrollbar-size: .375rem;  --scrollbar-minlength: 1.5rem; /*     ( ,  ) */ } .overflowing-element::-webkit-scrollbar {  height: var(--scrollbar-size);  width: var(--scrollbar-size); } .overflowing-element::-webkit-scrollbar-track {  background-color: var(--scrollbar-track-color); } .overflowing-element::-webkit-scrollbar-thumb {  background-color: var(--scrollbar-color);  /*   -  :hover :active */ } .overflowing-element::-webkit-scrollbar-thumb:vertical {  min-height: var(--scrollbar-minlength); } .overflowing-element::-webkit-scrollbar-thumb:horizontal {  min-width: var(--scrollbar-minlength); } 

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

تجدر الإشارة إلى أن الرمز أعلاه لديه مشكلة واحدة. يتكون ذلك من حقيقة أنه عند تعيين خصائص height أو width الخاصة بالعنصر الزائف ::-webkit-scrollbar في نظام التشغيل MacOS ، يتم استبدال ::-webkit-scrollbar غير الثابت ::-webkit-scrollbar ثابت (يتم إعادة تعريف الإعدادات القياسية). ومع ذلك ، ليس من الصعب إصلاح ذلك باستخدام جزء صغير من شفرة JavaScript.

المغلق وقليلا من JS

يمكننا إضافة كمية صغيرة من كود JavaScript إلى المشروع ، مما يسمح لنا بمعرفة ما إذا كان شريط التمرير القياسي ثابتًا أم لا. يبدو شيء مثل هذا:

 /* *   . *   body   `layout-scrollbar-obtrusive` *   ,     . */ var parent = document.createElement("div"); parent.setAttribute("style", "width:30px;height:30px;"); parent.classList.add('scrollbar-test'); var child = document.createElement("div"); child.setAttribute("style", "width:100%;height:40px"); parent.appendChild(child); document.body.appendChild(parent); //   .    //   30px,    . var scrollbarWidth = 30 - parent.firstChild.clientWidth; if(scrollbarWidth) {  document.body.classList.add("layout-scrollbar-obtrusive"); } document.body.removeChild(parent); 

إذا كان شريط التمرير ثابتًا ، layout-scrollbar-obtrusive فئة layout-scrollbar-obtrusive إلى عنصر المستند الأساسي. يمكن استخدام هذه الفئة لضبط خصائص width height لشرائط التمرير الثابتة فقط. هذا يتجنب التدخل الموصوف أعلاه في سلوك أشرطة التمرير. أثناء هذا التدخل ، تتغير أشرطة التمرير وينتقل المشروع عن إعدادات النظام التي قام بها المستخدم. هنا هو النمط لفئة layout-scrollbar-obtrusive :

 .layout-scrollbar-obtrusive .layout-scrollbar::-webkit-scrollbar {  height: var(--scrollbar-size);  width: var(--scrollbar-size); } 

هنا يمكنك العثور على مثال لتطبيق تقنية تستخدم CSS و JavaScript معًا. هنا ، للمقارنة ، مثال يوضح السلوك القياسي للنظام.

ملخص: مراجعة لحل المشكلة

على الأجهزة المزودة بشاشات تعمل باللمس والتي تستخدم أشرطة التمرير غير المثبتة (أي على أجهزة iOS و Android) ، نستخدم ببساطة السلوك القياسي لأشرطة التمرير.

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

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

فيما يلي المشاريع التجريبية ، التي تم وصف جوهرها أعلاه:

• عرض سلوك شريط التمرير القياسي.
• حل يستخدم CSS فقط. تم تصميم جميع أشرطة التمرير.
• حل يستخدم CSS و JavaScript. تم تصميم أشرطة التمرير الثابتة فقط.

أعزائي القراء! كيف نمط أشرطة التمرير في المشاريع الخاصة بك؟