استخدام أشرطة التمرير مع Bootstrap

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

لماذا استخدام أشرطة التمرير مع Bootstrap؟

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

تحسين تجربة المستخدم

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

تنظيم المحتوى

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

التصميم المتجاوب

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

تحسين الأداء

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

تنفيذ أشرطة التمرير مع Bootstrap

الخطوة 1: إعداد Bootstrap في مشروعك

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

يسمح لك تضمين Bootstrap في مشروعك باستخدام مجموعة شاملة من فئات CSS ومكونات JavaScript، بما في ذلك تلك اللازمة لإنشاء أقسام محتوى قابلة للتمرير.

الخطوة 2: إنشاء حاويات قابلة للتمرير

بمجرد إعداد Bootstrap، الخطوة التالية هي إنشاء حاويات قابلة للتمرير لمحتواك. يمكن تحقيق ذلك باستخدام فئات الأدوات المساعدة للتحكم في تجاوز المحتوى لـ Bootstrap. على سبيل المثال، تسمح فئة overflow-auto بجعل المحتوى داخل الحاوية قابلاً للتمرير عندما يتجاوز ارتفاع أو عرض الحاوية:

<div class="overflow-auto" style="height: 300px;">
  <p>محتواك هنا...</p>
</div>

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

الخطوة 3: تخصيص أشرطة التمرير

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

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #156cb9;
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

يقوم كود CSS هذا بتخصيص شريط التمرير من خلال تغيير عرضه ولونه وإضافة زوايا دائرية. يستهدف العنصر الزائف ::-webkit-scrollbar شريط التمرير، في حين يقوم ::-webkit-scrollbar-thumb و::-webkit-scrollbar-track بتخصيص شريط التمرير (الجزء القابل للسحب) والمسار (المنطقة التي ينزلق عليها الشريط) على التوالي. يرجى ملاحظة أن هذه التخصيصات قد لا تكون مدعومة من جميع المتصفحات، حيث تنطبق بشكل أساسي على المتصفحات المستندة إلى WebKit مثل Chrome وSafari.

تقنيات متقدمة لتخصيص شريط التمرير

استخدام JavaScript للتحكم الديناميكي في شريط التمرير

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

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

<button id="scrollTopBtn" onclick="scrollToTop()">أعلى</button>

<script>
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("scrollTopBtn").style.display = "block";
  } else {
    document.getElementById("scrollTopBtn").style.display = "none";
  }
}

function scrollToTop() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

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

دمج المكتبات الخارجية لتعزيز أشرطة التمرير

إذا كنت بحاجة إلى ميزات أكثر تقدمًا لأشرطة التمرير، يمكنك دمج مكتبات خارجية مثل Malihu Custom Scrollbar Plugin أو MDBootstrap. توفر هذه المكتبات مجموعة واسعة من خيارات التخصيص، بما في ذلك أشرطة التمرير المتحركة، وأحداث التمرير المخصصة، والمزيد.

لاستخدام Malihu Custom Scrollbar Plugin مع Bootstrap، أولاً، قم بتضمين ملفات CSS وJavaScript الخاصة بالمكوّن الإضافي في مشروعك:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

ثم قم بتفعيل شريط التمرير المخصص على العنصر المطلوب:

<script>
$(document).ready(function(){
  $(".scrollable-content").mCustomScrollbar({
    theme: "dark-thin"
  });
});
</script>

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

التطبيقات العملية لأشرطة التمرير في Bootstrap

جداول البيانات القابلة للتمرير

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

إليك مثالاً حول كيفية إنشاء جدول بيانات قابل للتمرير باستخدام Bootstrap:

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>الاسم الأول</th>
        <th>الاسم الأخير</th>
        <th>اسم المستخدم</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>مارك</td>
        <td>أوتو</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>يعقوب</td>
        <td>ثورنتون</td>
        <td>@fat</td>
      </tr>
      <!-- أضف المزيد من الصفوف حسب الحاجة -->
    </tbody>
  </table>
</div>

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

الأشرطة الجانبية القابلة للتمرير

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

لإنشاء شريط جانبي قابل للتمرير في Bootstrap، يمكنك استخدام الكود التالي:

<div class="sidebar overflow-auto" style="height: 100vh;">
  <ul class="list-group">
    <li class="list-group-item">الرئيسية</li>
    <li class="list-group-item">الملف الشخصي</li>
    <li class="list-group-item">الرسائل</li>
    <li class="list-group-item">الإعدادات</li>
    <!-- أضف المزيد من العناصر حسب الحاجة -->
  </ul>
</div>

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

أفضل الممارسات لاستخدام أشرطة التمرير في Bootstrap

ضمان الوصول

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

الحفاظ على التوافق عبر المتصفحات

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

اعتبارات الأداء

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

حالات استخدام إضافية لأشرطة التمرير في Bootstrap

النوافذ المنبثقة القابلة للتمرير

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

<div class="modal" tabindex="-1" id="exampleModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">عنوان النافذة المنبثقة</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
      </div>
      <div class="modal-body overflow-auto" style="max-height: 400px;">
        <p>محتواك هنا...</p>
        <p>محتوى إضافي...</p>
        <!-- أضف المزيد من المحتوى حسب الحاجة -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
        <button type="button" class="btn btn-primary">حفظ التغييرات</button>
      </div>
    </div>
  </div>
</div>

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

القوائم المنسدلة القابلة للتمرير

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    زر القائمة المنسدلة
  </button>
  <ul class="dropdown-menu overflow-auto" style="max-height: 200px;" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">إجراء</a></li>
    <li><a class="dropdown-item" href="#">إجراء آخر</a></li>
    <!-- أضف المزيد من العناصر حسب الحاجة -->
  </ul>
</div>

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

تحسين تجربة المستخدم مع أشرطة التمرير

التمرير السلس باستخدام Scroll Snap

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

/* الحاوية */
.scroll-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 400px;
}

/* العناصر الفرعية */
.scroll-section {
  scroll-snap-align: start;
  height: 100%;
}

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

استخدام Scrollspy مع أشرطة التمرير في Bootstrap

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

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">شريط التنقل</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">الأول</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">الثاني</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading3">الثالث</a>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example overflow-auto p-3" tabindex="0">
  <h4 id="scrollspyHeading1">العنوان الأول</h4>
  <p>المحتوى هنا...</p>
  <h4 id="scrollspyHeading2">العنوان الثاني</h4>
  <p>المحتوى الإضافي...</p>
  <h4 id="scrollspyHeading3">العنوان الثالث</h4>
  <p>المزيد من المحتوى...</p>
  <!-- أضف المزيد من الأقسام حسب الحاجة -->
</div>

يتم تطبيق خاصية data-bs-spy="scroll" على الحاوية القابلة للتمرير، ويربطها data-bs-target بشريط التنقل. أثناء قيام المستخدمين بالتمرير عبر المحتوى، يتم تمييز رابط التنقل المقابل، مما يوفر ملاحظات واضحة حول موضعهم الحالي داخل المستند.

التحديات الشائعة والحلول عند استخدام أشرطة التمرير مع Bootstrap

التحدي 1: التباين في مظهر شريط التمرير عبر المتصفحات

أحد التحديات التي يواجهها المطورون عند العمل مع أشرطة التمرير هو التباين في المظهر عبر المتصفحات المختلفة. في حين أن المتصفحات المستندة إلى WebKit مثل Chrome وSafari تدعم أنماط شريط التمرير المخصصة، قد لا يكون الآخرون مثل Firefox وInternet Explorer كذلك. لمعالجة هذه المشكلة، يمكنك تطبيق أنماط محددة للمتصفحات أو استخدام نمط احتياطي متسق للمتصفحات غير المدعومة:

/* المتصفحات المستندة إلى WebKit */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: #156cb9;
  border-radius: 10px;
}

/* النمط الاحتياطي للمتصفحات غير المستندة إلى WebKit */
.scrollbar {
  scrollbar-color: #156cb9 #f1f1f1; /* ألوان الشريط والمسار */
  scrollbar-width: thin; /* عرض شريط تمرير رفيع */
}

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

التحدي 2: مشاكل الأداء مع أشرطة التمرير المخصصة

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

بالإضافة إلى ذلك، فكر في استخدام تقنيات التحميل الكسول للمحتوى الذي لا يكون مرئيًا على الفور. يقلل ذلك من وقت التحميل الأولي ويحسن الأداء العام، خاصة على الصفحات التي تحتوي على كميات كبيرة من المحتوى القابل للتمرير.

التحدي 3: ضمان سهولة الاستخدام على الأجهزة اللمسية

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

@media (hover: none) {
  .scroll-container {
    overflow-y: scroll; /* تأكد من أن أشرطة التمرير مرئية على الأجهزة اللمسية */
  }
}

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

الخاتمة

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

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

قراءة إضافية

• أدوات تجاوز المحتوى في Bootstrap
• CSS Scroll Snap
• Scrollspy في Bootstrap
• CSS Scrollbar Styling
• نظام الشبكة في Bootstrap