عامود استعراض. إنشاء div بالتمرير العمودي باستخدام CSS

تتحكم الخاصية overflow في عرض محتويات عنصر الكتلة إذا كان المحتوى بأكمله غير مناسب ويمتد إلى ما هو أبعد من مساحة الأبعاد المحددة.

معلومات مختصرة

التسميات

قيم

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

رمل

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

div (الارتفاع: 80 بكسل؛ التجاوز: تلقائي؛)

مثال

وتظهر نتيجة هذا المثال في الشكل. 1.

أرز. 1. تطبيق خاصية الفائض

نموذج الكائن

شيء.style.overflow

ملحوظة

إنترنت إكسبلورر حتى الإصدار 7.0 شاملاً:

• العناصر الفرعية ذات الموضع النسبي والتي تم ضبط قيم الفائض فيها على الوضع التلقائي أو التمرير تتصرف كما لو كان لها الموضع: ثابت.

إنترنت إكسبلورر 8:

• يمكن أن يؤدي الجمع بين الفائض وقيمة التمرير مع خصائص max-height وfloat إلى فقدان عناصر صفحة الويب وعرض شاشة فارغة في المتصفح.
• بالنسبة للكتلة التي تم تعيين خصائصها float وoverflow على التمرير، يتم تجاهل العرض المحدد من خلال خاصية max-width.
• يزداد ارتفاع الكتلة ذات شريط التمرير الأفقي بمقدار ارتفاع شريط التمرير، على الرغم من أنه وفقًا لمواصفات CSS، يجب أن تتضمن الأبعاد المحددة أيضًا أشرطة التمرير.

لا يقوم Firefox 3.6 بتطبيق التجاوز بشكل صحيح على مجموعات خلايا الجدول ( , , ).

تخصيص

تمر كل مواصفات بعدة مراحل من الموافقة.

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

دعونا نلقي نظرة على كيف يمكن لقاعدة تجاوز سعة CSS (باستخدام قيمها المخفية والمرئية والتمرير والتلقائية) التحكم في المحتوى إذا لم يكن مناسبًا للمنطقة المقصودة.

في الممارسة العملية (أثناء التخطيط أو التحرير)، تحدث مثل هذه المواقف غالبًا، لذلك سيكون هذا مفيدًا للكثيرين. علاوة على ذلك، سنتطرق على طول الطريق إلى الاختلافات في هذه الخاصية overflow-x وoverflow-y، وهي حالة خاصة ولها خصائصها الخاصة. دعونا نتطرق أيضًا إلى قاعدة تجاوز النص ذات الصلة، والتي تحدد وضع رؤية النص في الكتلة التي تمتد إلى ما وراء حدود العنصر.

بالطبع، في كثير من الحالات يكون من المستحيل الاستغناء عن تحديد الأبعاد المحددة للمنطقة باستخدام العرض والارتفاع (عرض وارتفاع الكتلة)، الأمر الذي قد يستغرق . بشكل عام، سننظر أدناه في أمثلة عمل خاصية التجاوز في جميع المتغيرات الممكنة.

تجاوز السعة (مرئي، مخفي) - محتوى مرئي أو مخفي لكتلة تمتد إلى ما وراء حدودها

أولاً، وفقًا للتقليد، دعونا نلقي نظرة على القيم المطبقة في جدول مواصفات W3C (تعتمد البيانات على CSS2.1، على الرغم من أنها صالحة ومدعومة في CSS3 الأحدث):

كما ترون، يحتوي الفائض على 4 معلمات رئيسية (مرئية، مخفية، تلقائية، تمرير) وقيمة الوراثة، والتي يمكن تعيينها إذا رغبت في ذلك، ولكن افتراضيًا لا يتم توريث هذه القاعدة ( ورث: لافي لقطة الشاشة). القيمة الافتراضية مرئية (الأولي: مرئية).

قبل الانتقال إلى الدراسة من خلال دراسات الحالة، دعونا نوضح بعض التفاصيل. كما ذكرنا أعلاه، تسمح لك قاعدة التجاوز بالتحكم في محتوى عنصر الكتلة في الحالات التي لا يتناسب فيها مع حدوده. يتبع هذا مباشرة اسم قاعدة CSS هذه (يعني الفائض باللغة الإنجليزية تجاوز السعة، الزائد.)

مقدمًا، يمكنك التعرف على مكوناته من خلال اتباع الرابط المقدم. بالإضافة إلى ذلك، قد يكون من المفيد إلقاء نظرة على المادة التي تعطي العناصر الموجودة في كتلة الصفحة خصائصها.

لنأخذ حاوية DIV كمثال (المزيد عن div كأساس لتخطيط الكتلة)، ونلونها باستخدام الخلفية، من خلال سمة النمط، ونضع نصًا عشوائيًا بداخلها:

ستكون النتيجة النهائية شيء من هذا القبيل:

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

قاعدة التجاوز للكتل التي تحتوي على محتوى لا يمكن توزيعه في الارتفاع

لقد عرضت أعلاه مثالًا حيث يحتوي عنصر الكتلة على نص يمكن إعادة توزيعه (عن طريق تغيير التفاف الكلمات) إذا كان العرض محدودًا. وينطبق هذا الآن بشكل خاص عند استخدام التصميم المتكيف للعرض على الهواتف المحمولة. ومع ذلك، يحدث أن المحتوى، لسبب أو لآخر، لا يتمتع بهذه المرونة.

لنبدأ بنفس الشروط كما في المثال الذي ناقشناه أعلاه. كما تتذكر، عند تحديد عرض كتلة ثابت، تم إعادة توزيع المحتوى بحيث لا يتجاوز الحد الأفقي، ولكن في الوقت نفسه زاد ارتفاع الحاوية (مع المحتوى) عموديًا. الآن دعونا نغير المحتوى ونستبدل النص القياسي بكلمات طويلة بدون مسافات تشير إلى العرض:

يرجى ملاحظة أن المحتوى يتجاوز الآن الحدود الأفقية فورًا عندما يكون العرض محدودًا. وإذا كتبنا الفائض مخفيًا، فإننا بذلك نقطع المحتوى:

إضافة التمرير باستخدام معلمات التمرير والتلقائي لقاعدة التجاوز

الآن دعونا نلقي نظرة على الحالة التي يكون فيها عرض الحاوية وارتفاعها ثابتين، ولكن يُنصح بترك المحتوى الذي لا يتناسب معها يمكن الوصول إليه. لنأخذ نفس المثال مع عرض وارتفاع ثابتين، ولكن من أجل الوضوح، سنقوم بتعيين قيمة الارتفاع على 60 بكسل عن طريق إضافة تجاوز: التمريرلأنماط CSS:

ونتيجة لذلك، ظهرت أشرطة التمرير عموديا وأفقيا:

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

أود أن أشير إلى أن قاعدة النمط الأساسية لها اختلافات في شكل overflow-x وoverflow-y، والتي تأخذ نفس القيم (مرئية، مخفية، تمرير، تلقائي) مثل التجاوز الأساسي، فقط المعلمات المحددة هي يتم تطبيقه على محتويات الكتل أفقيًا (x) وعموديًا (y).

قاعدة تجاوز النص في CSS (مقطع، علامات الحذف).

الآن دعونا نتعرف على تعديل خاصية الفائض الموضحة أعلاه، والتي ظهرت فقط في CSS3. يمكن العثور على معلومات حول هذا الموضوع على الصفحة الرسمية المقابلة (مسودة تحرير W3C):

ملكية تجاوز النصله معنيان رئيسيان (مقطع وحذف). يصبح ساري المفعول فقط إذا تم تحديد تجاوز السعة، وهي قيمة غير مرئية. وهذه، كما تتذكر، هي المعلمة الافتراضية، لذلك يجب أن تحتوي أنماط العنصر المقابل على تجاوز السعة مع مخفي أو تمرير أو تلقائي.

المقطع هو القيمة الافتراضية ويقوم ببساطة بقص النص. لذلك دعونا نستخدم text-overflow لـ DIV الخاص بنا مع خصائص CSS المناسبة، مع إضافة مسافة بيضاء:nowrap (لمنع التفاف الكلمات):

كما ترون، يتيح لك القطع الناقص إضافة علامة القطعبدلا من النص الذي تم اقتصاصه، في إشارة إلى استمراره. لإعطاء هذا المثال نتيجة منطقية، يمكنك إضافة فئة زائفة:hover لـ div، والتي تغير نمط العنصر عندما تحوم فوقه:

الفئة 1: التمرير (تجاوز السعة: مرئي؛ المسافة البيضاء: عادي؛)

سيتم الآن اقتصاص النص، ولكن إذا قمت بتحريك الماوس فوقه، فسوف يظهر بالكامل. يمكنك التحقق من ذلك باتباع الرابط المقدم.

من المؤلف:مقال بقلم ضيفنا بيتر بيزنسمانز. بيتر هو مطور الواجهة الأمامية في Audience، حيث يستمتع بأساليب الكتابة في SCSS. اليوم سيُظهر لنا ما أسميه خدعة CSS الصادقة. الويب بأكمله عمودي. تقرأ الموقع مثل كتاب عادي: من اليسار إلى اليمين، ومن أعلى إلى أسفل. لكن في بعض الأحيان تريد الابتعاد عن الوضع العمودي والقيام بشيء مجنون: قم بعمل قائمة أفقية. أو حتى أكثر جنونًا، موقع أفقي!

سيكون من الرائع لو تمكنا من القيام بشيء مثل هذا:

/* رمز مزيف */ div (اتجاه التمرير: أفقي؛)

لسوء الحظ، هذا لن يحدث. هذا لم يتم التخطيط له حتى في CSS.

وهذا أمر سيء للغاية لأن الشركة التي أعمل بها ستستخدم هذا بالفعل. نحن نقوم بالكثير من العروض التقديمية، والعرض التقديمي هو شيء أفقي إلى حد ما. عادة، تكون نسبة العرض إلى الارتفاع للشرائح 4:3 أو 16:9. ولهذا السبب، لدينا مشكلة مستمرة مع الشرائح الأفقية وتقنيات الويب العمودية. بكلمة "نحن" أعني أنا. لكن ما أحبه هو التحديات.

حالة استخدام أخرى

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

الطريقة بدون جافا سكريبت

نعلم جميعًا أن هناك العديد من الطرق للقيام بالتمرير الأفقي في JS. هناك بعض الأمثلة على CSS-Tricks. كنت أتساءل عما إذا كان من الممكن تنفيذ هذه الفكرة باستخدام CSS خالصًا. تبين أن الحل بسيط للغاية:

إنشاء حاوية مع العناصر؛

قم بتدوير الحاوية 90 درجة عكس اتجاه عقارب الساعة بحيث تكون الحافة السفلية على اليمين؛

نقوم بتدوير العناصر الموجودة داخل الحاوية إلى مكانها.

الخطوة 1) إنشاء حاوية

إنشاء div مع العديد من الأطفال.

في مثالنا، ستكون الحاوية القابلة للتمرير بعرض 300 بكسل وستحتوي على 8 عناصر بحجم 100 × 100 بكسل. الأحجام تعسفية، يمكنك تعيين أي.

ارتفاع الحاوية سيصبح العرض والعكس صحيح. أدناه، سيكون "عرض" الحاوية 300 بكسل:

غلاف التمرير الأفقي (العرض: 100 بكسل؛ الارتفاع: 300 بكسل؛ تجاوز السعة y: تلقائي؛ تجاوز السعة x: مخفي؛)

والعناصر الطفلية:

غلاف التمرير الأفقي > div ( العرض: 100 بكسل؛ الارتفاع: 100 بكسل;)

الخطوة 2) قم بتدوير الحاوية

نحتاج الآن إلى تدوير الحاوية بمقدار -90 درجة باستخدام خاصية التحويل في CSS. لقد حصلنا على سكرولر أفقي.

غلاف التمرير الأفقي (... تحويل: تدوير (-90 درجة)؛ أصل التحويل: أعلى اليمين؛)

هناك مشكلة صغيرة واحدة فقط: لقد تم تدوير العناصر الفرعية مع الحاوية.

الخطوة 3) إعادة العناصر الفرعية إلى مكانها

فكيف تعيد العناصر إلى مكانها؟ قم بإعادته مرة أخرى باستخدام خاصية التحويل CSS.

غلاف التمرير الأفقي > div (... تحويل: تدوير (90 درجة)؛ أصل التحويل: أعلى اليمين؛)

الخطوة 4) تحديد المواقع الثابتة

يبدو كل شيء على ما يرام، ولكن هناك بعض المشاكل.

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

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

التوافق

لقد تحققت من التوافق على الأجهزة المتاحة لي.

سطح المكتب

نظرًا لأن تصميم شريط التمرير يعمل حاليًا فقط في متصفحات Webkit/Blink، فسيتم عرض شريط تمرير رمادي عادي في Firefox وIE. يمكن تصحيح ذلك باستخدام JS وإخفائها تمامًا، لكن هذا موضوع لدرس آخر.

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

أجهزة محمولة

لقد فوجئت بسرور عندما علمت أن Android يتعرف على أن الحاوية قد تم تدويرها ويسمح لك بالتمرير عن طريق التمرير إلى اليسار واليمين.

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

خاتمة

وفقًا لموقع Can I Use الإلكتروني، أصبحت التحويلات في CSS مدعومة الآن بنسبة 93%+ من المستخدمين (في وقت كتابة هذا التقرير، نوفمبر 2016). لا ينبغي أن تكون هناك مشكلة هنا.

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

المشكلة الأكبر هي المدخلات التي تعمل باللمس، حيث تحتاج إلى التمرير لأعلى ولأسفل للانتقال إلى اليسار واليمين. قد يكون الحل هو كتابة رسالة على الموقع مع شرح، ولكن بعد ذلك سيتعين عليك الاعتماد على المستخدمين لقراءتها. وحتى ذلك الحين سيكون مخالفًا للحس السليم. الحل الآخر هو التقاط مدخلات اللمس باستخدام JS على الأجهزة، ولكن من الأفضل بعد ذلك كتابة كل شيء في JS والتخلي تمامًا عن اختراق CSS.

في بعض الأحيان يكون من الضروري وضع جزء كبير من النص في نافذة صغيرة لا تتلاءم تمامًا مع هذه المشكلة، فمن السهل إنشاء طبقة بالتمرير - div مع التمرير.

سوف تحتاج

طبقة ذات حجم ثابت وتصميم CSS.

CSS

يقوم class.scroll في CSS بتعيين المعلمات بطول 600 بكسل و300 بكسل في الارتفاع والحشوة والحدود ولون الخلفية. لكن! المعلمة الأكثر أهمية هي overflow:auto، والتي تقوم بتعيين شريط التمرير ليظهر عندما يكون مقدار النص أكبر من حجم الطبقة.

التمرير (العرض: 500 بكسل؛ الارتفاع: 300 بكسل؛ /* الحجم الثابت مطلوب */ تجاوز السعة: تلقائي؛ /* يظهر التمرير حسب الحاجة */ الحشو: 10 بكسل 20 بكسل؛ الحدود:#999 1 بكسل صلب؛ لون الخلفية:#FAFAFA;)

لغة البرمجة

نتيجة

سترى على الشاشة إطارًا صغيرًا به نص وحدود رمادية.

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

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

عمر خدمة المبردات مثل "توسول" و"لينا" محدود بمتانة المواد المضافة وعادة ما يكون عامين؛ متوسط ​​عدد الكيلومترات لمختلف السيارات هو 50000 كم.

عند صيانة مركبة مستعملة لأول مرة، يجب تغيير سائل التبريد. بعد تصريف السائل القديم، املأ النظام بالماء النظيف، وابدأ تشغيل المحرك واتركه في وضع الخمول لمدة 15-20 دقيقة؛ ثم قم بتصريف الماء وإعادة ملء النظام بسائل تبريد جديد.

يمكنك استخدام overflow-y: التمرير للتمرير العمودي.