كيف أقوم بتفعيل scroll في حاوية معينة

بتاريخ 8 ساعات قال عبد الواحد الحدادي:

مـرحباً بكم أيها الكرام، 

أريد مساعدة في كيف أقوم بتفعيل scroll في حاوية div معينة، حاولت عمل ذلك ولكم لم أستطع إيجاد الحل .

هذا الـرابط يوضّح الفكرة الذي أريدها (الصور في الصفحة) - اضغط هـنـا .

وشكراً لكم مسبقاً 

مرحبًا عبد الواحد.

هل يمكنك أن ترفق الأكواد الخاصة بك مع توضيح أين تريد تطبيق ال smoothscroll تحديدًا حتى أتمكن من مساعدتك؟؟

بتاريخ منذ ساعة مضت قال Yomna Raouf:

مرحبًا عبد الواحد.

هل يمكنك أن ترفق الأكواد الخاصة بك مع توضيح أين تريد تطبيق ال smoothscroll تحديدًا حتى أتمكن من مساعدتك؟؟

أهلاً أستاذتي، 

1 - الصورة المرفقة ذات العنوان (smothscroll) هي الذي أريد تطبيق scroll عليها .

2 - الصورة الثانية المرفقة ذات العنوان (bg-height) أريد من فضلك أن أطبق عليها خليفة بلون معين فقط على قائمة التنقل الجانبية وعلى كامل طول الصفحة .

* مرفق ملف المشرروع . 

Dashbord-admin.zip

يمكنك إضافة scroller على div بواسطة css.

للتطبيق ، أضف هذا النمط إلى عنصر div الخاص بك:

overflow-y: scroll;
height: XXpx;

سيكون الإرتفاع الذي تحدده حيث قد رمزت له ب XX هو إرتفاع div العادي وبمجرد ما ستكون محتويات div تتجاوز هذا الإرتفاع, فسيظهر حينها scroller.

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

التحكم في كيفية ظهور المحتوى داخل div معين يكون بالإعتماد على حجم الـ div المحدد و حجم المحتوى المرفق فيه، أي أنه في حال تجاوز المحتوى حجم الـ div هنا نحن أمام عدة خيارات ( بإستخدام خاصية overflow ) :

1.  حذف المحتوى الإضافي بالنسبة لحجم الـ div :

div {
  width: 110px;
  height: 110px;
  overflow: hidden;
}

2.  السماح للمحتوى بأن يتجاوز الـ div و يخرج عن الحجم المحدد :

div {
  width: 110px;
  height: 110px;
  overflow: visible;
}

3.  إيجاد scroll للتحكم في إظهار المحتوى الذي قد تجاوز حجم الـdiv ( بشكل عمودي ) :

div {
  width: 110px;
  height: 110px;
  overflow: auto;
}

4.  إيجاد scroll للتحكم في إظهار المحتوى الذي قد تجاوز حجم الـdiv ( بشكل عمودي و أفقي ) :

div {
  width: 110px;
  height: 110px;
  overflow: scroll;
}

أتمنى لك التوفيق.

الحل : 

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

الخطوات :

1. حدد  div الأب الذي يحتوى على العناصر التي تريد إنشاء لها scroll ,في الرسائل  لديك إسم الid  الخاص في الdiv الأب هو 

id="bg-msg"

   2. إضافة الكود الخاص  ب overflow, والحرف y هو لتحديد المحور  أي أنه سيكون ال scroll  للأعلى أو للإسفل 

div#bg-msg {
    height: 271px;
    overflow-y: scroll;
}

      نتيجة الكود كما في الصورة :

    3. في حال أنك استخدمت overflow بدون إضافة محور سيظهر ال scroll  حول المحورين x,y

div#bg-msg {
    height: 271px;
    overflow-y: scroll;
}

   كما في الصورة :

بتاريخ منذ ساعة مضت قال omar haddad:

الحل : 

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

الخطوات :

1. حدد  div الأب الذي يحتوى على العناصر التي تريد إنشاء لها scroll ,في الرسائل  لديك إسم الid  الخاص في الdiv الأب هو 

id="bg-msg"

   2. إضافة الكود الخاص  ب overflow, والحرف y هو لتحديد المحور  أي أنه سيكون ال scroll  للأعلى أو للإسفل 

div#bg-msg {
    height: 271px;
    overflow-y: scroll;
}

      نتيجة الكود كما في الصورة :

    3. في حال أنك استخدمت overflow بدون إضافة محور سيظهر ال scroll  حول المحورين x,y

div#bg-msg {
    height: 271px;
    overflow-y: scroll;
}

   كما في الصورة :

أهلاً أستاذي، فهمت الآن، 

لكن كيف أجعل scroll على جهة اليمين ؟ هل من طريقة لعمل ذلك ؟

وشكراً مسبقاً  .

بتاريخ 26 دقائق مضت قال عبد الواحد الحدادي:

أهلاً أستاذي، فهمت الآن، 

لكن كيف أجعل scroll على جهة اليمين ؟ هل من طريقة لعمل ذلك ؟

وشكراً مسبقاً  .

نعم يمكن القيام بذلك من خلال  إضافة direction : left to right 

div#bg-msg {
    height: 271px;
    overflow-y: scroll;
   direction:ltr;

}

 بعد إضافته ستجد أن الكلام أصبح من اليسار لليمين الحل هو إضافة  direction :right to left  لكل عنصر  أصبح في الكلام عكسى  مثل : card_bady  كما في الصور 

أكمل في إضافة  الخطوات التالية :

• أضف direction على الكود  الخاص بك  كما في الكود  :

.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
    direction: rtl;
}

• وأضف ل orders_msg كما في الكود :

.orders_msg{
direction:rtl
}

•  ثم سيظهر لليمين 

بتاريخ 15 دقائق مضت قال omar haddad:

نعم يمكن القيام بذلك من خلال  إضافة direction : left to right 

div#bg-msg {
    height: 271px;
    overflow-y: scroll;
   direction:ltr;

}

 بعد إضافته ستجد أن الكلام أصبح من اليسار لليمين الحل هو إضافة  direction :right to left  لكل عنصر  أصبح في الكلام عكسى  مثل : card_bady  كما في الصور 

أكمل في إضافة  الخطوات التالية :

• أضف direction على الكود  الخاص بك  كما في الكود  :

.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
    direction: rtl;
}

• وأضف ل orders_msg كما في الكود :

.orders_msg{
direction:rtl
}

•  ثم سيظهر لليمين 

رائع أستاذي، شكراً جزيلا لك . 

لو سمحت أسالك سؤال آخر؛ هل بالإمكان التحكم في تنسيق الـ Scroll ؟ 

أشكرك مسبقاً أستاذي الكريم .

بتاريخ 9 ساعات قال عبد الواحد الحدادي:

رائع أستاذي، شكراً جزيلا لك . 

لو سمحت أسالك سؤال آخر؛ هل بالإمكان التحكم في تنسيق الـ Scroll ؟ 

أشكرك مسبقاً أستاذي الكريم .

نعم يمكنك التحكم في هذه التنسيقات لقد قمنا بعمل مشابه لهذا مسبقًا في مسار بناء تطبيق youtuby عن طريق التالي :

/* Let's say scroll bar of a div has to be styled which has an id "myDivId". Then you can do following. This way you can use different styles for scroll bars of different elements. */ 

#myDivId::-webkit-scrollbar {
    width: 12px;
}

#myDivId::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

#myDivId::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

يمكنك تجربة هذه الأكواد و التعديل عليها من هنا.

بالتوفيق.

بتاريخ 51 دقائق مضت قال عبد الواحد الحدادي:

رائع أستاذي، شكراً جزيلا لك . 

لو سمحت أسالك سؤال آخر؛ هل بالإمكان التحكم في تنسيق الـ Scroll ؟ 

أشكرك مسبقاً أستاذي الكريم .

يمكنك التحكم فى style لدى Scroll وهذا شرح :

• يمكن التحكم في width لدى scroll  عن طريق إضافة :

/* width */
::-webkit-scrollbar {
  width: 40px;
}

• يمكن التحكم في لون شريط scroll بالكامل وخواصه عن طريق إضافة : 

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

• يمكن التحكم في لون scroll وخواصه وليس الشريط بالكامل عن طريق اضافة :

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10%

}

• يمكن التحكم في خواص scroll عند hover  فقط على scroll عن طريق :

  ::-webkit-scrollbar-thumb:hover {
    background: black; 
  }

   

بتاريخ 46 دقائق مضت قال عبد الواحد الحدادي:

رائع أستاذي، شكراً جزيلا لك . 

لو سمحت أسالك سؤال آخر؛ هل بالإمكان التحكم في تنسيق الـ Scroll ؟ 

أشكرك مسبقاً أستاذي الكريم .

مرحباً @عبد الواحد الحدادي
نعم بإمكانك تنسيق ال scroll لكن المُشكلة ليست هناك خاصية ثابتة تعتمدها كافة المتصفحات في تنسيقه وليست هناك خصائص رسمية فكل متصفح يستعمل خصائص معينة و خاصة به و هناك متصفحات قديمة لا تدعم
فمثلاً متصفحات Webkit اي Safari و Chrome تستخدم العناصر و الأصناف الزائفة التالية لتنسيق شريط التمرير ( scroll bar ) :

/* العناصر الزائفة */
::-webkit-scrollbar              {  }
::-webkit-scrollbar-button       {  }
::-webkit-scrollbar-track        {  }
::-webkit-scrollbar-track-piece  {  }
::-webkit-scrollbar-thumb        {  }
::-webkit-scrollbar-corner       {  }
::-webkit-resizer                {  }

/* الأصناف الزائفة */
:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

يُمكنك مشاهدة هذه ال pen : إضغط هنا فهي تستخدم هذه العناصر.

لكن إن أردت أن يكون تنسيق شريط التمرير نفسه في كافة المتصفحات يُمكنك إستخدام أحد إضافات الجافاسكربت أو الجيكويري و من بين هذه الإضافات nicescroll و هذا مثال عن إستخدامها:

طريقة إستخدام الإضافة سهلة ستقوم أولا بتضمين مكتبة الجي كويري ثم تقوم بتضمين الإضافة ثم تقوم بإستخدامها بهذا الشكل

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
<script>
	
  $(function() {  
    $("#elementID").niceScroll({
      cursorwidth: '8px', // تغيير العرض 
      cursorcolor: '#273c75', // تغيير اللون
    });
  });
  
</script>

هناك العديد من الإعدادات و المعاملات يُمكنك الإطلاع عليها من خلال مستودع الإضافة على github من : هنا كما يُمكنك مشاهدة هذا الفيديو فهو يشرح طريقة إستخدامها: 

بالتوفيق.