من المعروف أن متصفح IE6، الذي تم إنتاجه في عام 2002 وهو السائد حاليًا في بلدي، لا يدعم سمة تحديد المواقع الثابتة الثابتة في CSS2، ولهذا السبب ابتكر مهندسو الواجهة الأمامية المضطربة حلولاً مختلفة:
1. حل JS التقليدي
هذا هو الأقدم والأكثر استخدامًا، على سبيل المثال، العديد من إعلانات المقاطع التي تتبع شريط التمرير تستخدم هذا الحل. العيب هو أن عنصر شريط التمرير الذي يتم سحبه يهتز بشكل سيئ للغاية، وعلى الرغم من إمكانية تحسينه من خلال التجانس، إلا أن التأثير لا يزال غير مثالي. لكن ما أريد قوله هو أنه على الرغم من أن التأثير البصري لهذا الحل أسوأ قليلاً، إلا أن الاستقرار لا يعني شيئًا.
2. استخدم بنية HTML وطريقة محاكاة التخطيط
تم استخدام هذا الحل من قبل 163 Blog. 163 يضع كل المحتوى في حاوية بارتفاع 100% ويتم ضبط شريط التمرير على الوضع التلقائي، ثم يقوم بتعيين طبقة ذات موضع مطلق أسفلها، بحيث يمكن للطبقة ذات الموضع المطلق أن تصل إلى حالة ثابتة. المبدأ: شريط التمرير الذي تسحبه ليس الصفحة بأكملها التي تسحبها، ولكنه الحاوية التي تحاكي الصفحة بأكملها، وبالتالي فإن المناطق خارج الحاوية تكون "ثابتة". مفصل:
وفيما يلي المحتوى المقتبس: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
التأثير البصري هنا مثالي، لكن هناك ثلاث مشاكل:
1. يجب تغيير بنية HTML (لن يتم شرح هذا العنصر)
2. يدمر تجربة المستخدم: لقد قمت بتجربة هذه الطريقة من قبل، ولكن شريط التمرير لن يبقى في مكانه عندما أقوم بتحديث الصفحة، وهو ما لا أستطيع تحمله.
3. تدمير بعض أحداث js، مثل ذكر cloudgamer أنه سيدمر حدث التمرير للنافذة، حيث يمكن إبطال N العديد من مكونات js المغلفة على الأقل.
3. حل "طريقة المقاصة" غير المسبوقة باستخدام طريقة المريخ
المبدأ غريب للغاية لدرجة أنني لا أستطيع تفسيره، والتطبيق محدود للغاية. للحصول على أمثلة انظر:
وفيما يلي المحتوى المقتبس: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
4. حل التعبير بالإضافة إلى الخلفية الثابتة للاستخدام الجديد للتكنولوجيا القديمة
يمكن لهذا الحل أن يحقق تحديد المواقع بشكل ثابت بشكل مثالي. مثال:
cloudgamer: تأثير الطبقة المنبثقة AlertBox (مربع مطالبة المعلومات).