اختبار الفرق بين هذه الخصائص الثلاثة من خلال العرض التوضيحي.
يوضح:
ScrollWidth: سيصبح عرض المحتوى الفعلي للكائن ، وعرض الخط بدون حواف ، أكبر لأن المحتوى في الكائن يتجاوز منطقة المشاهدة.
عرض العميل: عرض منطقة المشاهدة لمحتوى الكائن ، دون لف خطوط التوازن الشريطية ، سيتغير مع تغير حجم عرض الكائن.
عرض الإزاحة: العرض الفعلي للكائن ككل ، يتم توجيه شريط التمرير بالتساوي ، والذي سيتغير عندما يعرض الكائن الحجم.
يضع العرض التوضيحي عنصرًا نصًا في الصفحة ويعرضه مع العرض الافتراضي والارتفاع.
الوضع 1:
إذا لم يكن هناك محتوى في العنصر أو لا يتجاوز المحتوى منطقة المشاهدة ، فلا يظهر التمرير أو غير متوفر.
scrollwidth = clientwidth ، كلاهما هو عرض منطقة عرض المحتوى.
عرض الإزاحة هو العرض الفعلي للعنصر.
الوضع 2:
يتجاوز محتوى العنصر منطقة المشاهدة ، ويظهر شريط التمرير ويتوفر.
scrollwidth> clientwidth.
Scrollwidth هو عرض المحتوى الفعلي.
عرض العميل هو عرض منطقة عرض المحتوى.
عرض الإزاحة هو العرض الفعلي للعنصر.
نهاية
ما ورد أعلاه هو كل الاختلافات بين التمرير ، العميل عرض العميل ، والعرض الإزاحة. آمل أن يكون ذلك مفيدًا للجميع.