التغلب على "التمرير الزائد" في صفحات الويب

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

الطريقة الأولى: تقييد التمرير الزائد

إذا كنت تريد تعطيل التمرير الزائد تمامًا، فاستخدم كود CSS التالي:

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}

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

الطريقة الثانية: تخصيص سلوك التمرير الزائد

لتخصيص سلوك التمرير الزائد والتحكم فيه، استخدم خاصية اللمس:

body {
    -webkit-touch-callout: none;
    -webkit-touch-action: manipulation;
}

يمنع الكود أعلاه تحديد النص بينما يسمح بالتلاعب العام باللمس، بما في ذلك التمرير ضمن الارتفاع المحدد للصفحة. لمزيد من التحكم الدقيق، يمكنك تحديد قيم إجراءات اللمس الدقيقة، مثل pan-x للسماح بالتمرير الأفقي فقط.