قم بإنشاء مربع مع نص التمرير باستخدام CSS و HTML

ان لغة البرمجة مربع التمرير هو مربع يضيف أشرطة تمرير إلى الجانب الأيمن والأسفل عندما تكون محتويات الصندوق أكبر من أبعاد الصندوق. بمعنى آخر ، إذا كان لديك مربع يتسع لحوالي 50 كلمة ، وكان لديك نص مكون من 200 كلمة ، فسيضع مربع تمرير HTML أشرطة التمرير لأعلى للسماح لك بمشاهدة 150 كلمة إضافية. في لغة HTML القياسية ، سيؤدي ذلك ببساطة إلى دفع النص الإضافي خارج المربع.

جعل التمرير HTML سهل إلى حد ما. تحتاج فقط إلى ضبط العرض و ارتفاع للعنصر الذي تريد تمريره ثم استخدم ملف CSS overflow لتعيين الطريقة التي تريد أن يحدث بها التمرير.

ماذا تفعل بالنص الإضافي؟

عندما يكون لديك نص أكثر مما يتسع في المساحة الموجودة على التخطيط الخاص بك ، فلديك بعض الخيارات:

• أعد كتابة النص بحيث يكون أقصر وملائمًا.
• اسمح للنص بالتدفق خارج الحدود وأتمنى أن ينثني التصميم لدعمه.
• قطع النص حيث يفيض.
• أضف أشرطة تمرير (عادةً ما تكون عمودية للنص) بحيث يتم تمرير المسافة لإظهار النص الإضافي.

عادةً ما يكون الخيار الأفضل هو الخيار الأخير: إنشاء مربع نص قابل للتمرير. ثم يظل من الممكن قراءة النص الإضافي ، لكن التصميم الخاص بك لم يتم المساومة عليه.

سيكون HTML و CSS لهذا:

اكتب هنا... 

ال تجاوز: تلقائي ؛ يخبر المتصفح بإضافة أشرطة تمرير إذا كانت هناك حاجة إليها لمنع النص من تجاوز حدود div. ولكن لكي يعمل هذا ، تحتاج أيضًا إلى تعيين خصائص نمط العرض والارتفاع على div ، بحيث تكون هناك حدود للتجاوز.

يمكنك أيضًا قطع النص عن طريق تغيير overflow: auto؛ ل إخفاء الفائض؛ إذا تركت خاصية overflow ، فسينتشر النص فوق حدود div.

يمكنك إضافة أشرطة التمرير إلى أكثر من مجرد نص

إذا كانت لديك صورة كبيرة تريد عرضها في مساحة أصغر ، فيمكنك إضافة أشرطة تمرير حولها بنفس الطريقة التي تريدها مع النص.

في هذا المثال ، توجد الصورة مقاس 400 × 509 داخل فقرة مقاس 300 × 300.

يمكن أن تستفيد الجداول من أشرطة التمرير

قد يكون من الصعب جدًا قراءة جداول المعلومات الطويلة بسرعة كبيرة ، ولكن بوضعها داخل قسم محدود الحجم ثم إضافة خاصية overflow ، يمكنك إنشاء جداول بها الكثير من البيانات التي لا تشغل مساحة كبيرة على صفحة.

أسهل طريقة هي تمامًا كما هو الحال مع الصور والنص ، ما عليك سوى إضافة div حول الجدول ، وتعيين عرض وارتفاع div ، وإضافة خاصية overflow:

... 

شيء واحد يحدث عند القيام بذلك هو شريط التمرير الأفقي الذي يظهر عادةً لأن المتصفح يفترض أن كروم أشرطة التمرير يتداخل مع الجدول. هناك طرق عديدة لإصلاح هذا من تغيير عرض الجدول وغيرها. لكن المفضل لدينا هو ببساطة إيقاف تشغيل التمرير الأفقي باستخدام خاصية CSS 3 تجاوز- x

فقط اضف تجاوز- x: مخفي ؛ إلى div ، وسيؤدي ذلك إلى إزالة شريط التمرير الأفقي. تأكد من اختبار ذلك ، فقد يكون هناك محتوى يختفي.

يدعم Firefox استخدام علامات TBODY لـ Overflow

إحدى الميزات الرائعة لمتصفح Firefox هي أنه يمكنك استخدام خاصية overflow على علامات الجدول الداخلية مثل tbody و thead أو tfoot. هذا يعني أنه يمكنك تعيين أشرطة التمرير على محتويات الجدول ، وتبقى خلايا الرأس مثبتة فوقها. يعمل هذا فقط في Firefox ، وهو أمر سيء للغاية ، ولكنه ميزة رائعة إذا كان القراء يستخدمون Firefox فقط. تصفح إلى هذا المثال في Firefox لمعرفة ما أعنيه.

... NamePhoneJennifer502-5366. 

...