اذهب إلى المحتوى
  • 0

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

علاء الدين الزهوري

السؤال

Recommended Posts

  • 0

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

body{
   overflow-x: hidden;
}

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

 

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

  • 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; /* إظهار شريط التمرير العمودي */
}

 

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...