إخفاء شريط التمرير مع الحفاظ على إمكانية التمرير

على الرغم من تعطيل شريط التمرير باستخدام الفائض: مخفي، تم فقدان وظيفة التمرير. لمعالجة هذه المشكلة، يوجد حل بديل يجمع بين غلاف CSS وحسابات JavaScript.

JavaScript وCSS Solution

استخدم كود CSS وJavaScript التالي:

#wrapper {
  overflow: hidden;
}

// Calculate the width of the element excluding the scrollbar
var elementWidth = document.getElementById("element").scrollWidth;

// Set the wrapper width to match the element width
document.getElementById("wrapper").style.width = elementWidth   "px";

من خلال إخفاء شريط التمرير باستخدام CSS وضبط عرض الغلاف ليتناسب مع عرض المحتوى الفعلي، يمكنك الاحتفاظ بوظيفة التمرير عبر الماوس أو لوحة المفاتيح.

تقنية إضافية

لإنشاء div قابل للتمرير بدون شريط تمرير مرئي، استخدم نفس المبدأ. ما عليك سوى إضافة تجاوز السعة y: التمرير؛ خاصية للعنصر الداخلي.