إمكانية الوصول. يتضمن أحد هذه السيناريو الحد من نطاق التمرير لعنصر داخل عنصر الوالدين ديناميكيًا.

المشكلة:

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

الحل: الاستفادة من تقنيات CSS وتقنيات JavaScript.

أولاً ، نحدد حد ارتفاع CSS للخريطة Div باستخدام خاصية "Max-Height". هذا يحدد أقصى ارتفاع يمكن أن تصل إليه الخريطة ، مما يضمن أنه لا يمكن أن يتجاوز ارتفاع العنصر الأصل. &&S]}

التالي ، نستخدم JavaScript لتتبع موضع التمرير للمستخدم وضبط موضع الخريطة وفقًا لذلك. بدلاً من استخدام طريقة jQuery ".animate ()" ، فإننا نختار معالجة CSS المباشرة لأسباب الأداء. = $ (this) .scrolltop () ؛
if (scrollval> $ ("#sidebar"). Offset (). TOP) {

$ ("#map"). css ({{ Margintop: (Scrollval - $ ("#sidebar"). Offset (). TOP) "PX" }) ؛

} آخر {

$ ("#map"). css ({ Margintop: "0px" }) ؛

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

scrollval = $ (this) .scrolltop () ؛
if (scrollval> $ (". header"). height ()) {

$ ("#map"). css ({{ الموقف: "ثابت" ، أعلى: "0px" }) ؛

} آخر {

$ ("#map"). css ({ الموقف: "ثابت" }) ؛

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