• 0

سبب ظهور شريط التمرير الافقي وكيفية ازالته

السلام عليكم

في حال ظهور سكرول أفقي بقيمة تقريباً (5px)

كيف يمكنني معرفة سبب ظهوره؟؟

2 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يمكنك عمل ذلك عن طريق الخاصية overflow-x , تمكنك هاته الخاصية من التحكم في العناصر المتجاوزة على المحور الأفقي , فلإخفاءها على سبيل المثال يمكنك إعطاءها القيمة hidden لعنصر البودي على هذا النحو : 

body{
   overflow-x: hidden;
}

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

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

تكون سبب المشكلة في عناصر html , اذا كنت تستخدم بوتستراب فغالبا ما تكون المشكلة بسبب أحد العناصر التي لديها الصنف row, حيث تكون قد نسيت اغلاق العنصر بشكل صحيح, لذلك المشكلة تظهر, لحلها يمكنك اعطاء عنصر body هذه الخاصية,

body{
	 overflow-x: hidden;
}

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

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

overflow: hidden 

لمنع أظهار أي بيانات أو نصوص خارج العنصر الحاوي , أو يمكنك تحديد عدم إظهار أي سكرول سواء الأفقي أو العامودي باستخدام 

overflow-y: hidden;
overflow-x: hidden;

أو يمكنك استخدام jQuery لتنفيذ ذلك من خلال وضع خاصية css للعنصر الذي تريد إخفاء أي نصوص أو بيانات ممتدة  خارجه.

$(function(){
	 // للسكرول الأفقي و العمودي 
	$('div').css({"overflow": "hidden"});
	// أو لسكرول العمودي
	$('div').css({"overflow-y": "hidden"});
	// أو لسكرول الأفقي
	$('div').css({"overflow-x": "hidden"});
});

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

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

حيث يمكنك فحص المكوّن Inspect الذي يحوي شريط التمرير الأفقي ومراقبة خاصية overflow والتي لها عدة قيم:

visible: سيتم إظهار المحتوى كما هو حتى لو كان أكبر من حجم العنصر.

hidden: سيتم قص المحتوى الأكبر من العنصر وإظهار الجزء الظاهر فقط.

scroll: مشابهة ل hidden ولكن سيظهر شريط التمرير هنا دوماً في العنصر لرؤية بقية المحتوى في حال تجاوز حجم العنصر.

auto: مشابهة ل scroll ولكن سيتم إضافة شريط التمرير scrollbar فقط عند الحاجة له.

كما يمكنك تزويد الخاصية x للدلالة على الشريط الأفقي، و y للدلالة على الشريط العمودي، وبالتالي إخفاء وإظهار شريط التمرير من خلال CSS يكون بالشكل التالي:

div {
  overflow-x: hidden; /* إخفاء شريط التمرير الأفقي */
  overflow-y: scroll; /* إظهار شريط التمرير العمودي */
}

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن