scroll-margin-top: إظهار عنوان الرابط تحت شريط ثابت

الخلاصة السريعة

ضع المسافة على العنوان المقصود

تؤثر scroll-margin في منطقة العنصر المقصودة عند الانتقال إلى رابط قسم، حتى دون تفعيل الالتقاط؛ ضعها على الهدف. [3]

في المقتطف، ينتقل الرابط إلى العنصر ذي id="schedule". طبّق خاصية الإزاحة على ذلك العنصر؛ تغيير نمط الرابط نفسه لا يحدد مساحة وصول العنوان. لا تحتاج إلى إضافة scroll-snap-type لهذا الغرض. [3]

مرّر الشيفرة أفقيًا عند الحاجة.

<a href="#schedule">مواعيد الزيارة</a>
<!-- محتوى الصفحة بين الرابط والعنوان -->
<h2 id="schedule">مواعيد الزيارة</h2>

اختر قيمة تناسب الشريط

تقبل scroll-margin-top طولًا مثل px أو rem، ولا تقبل نسبة مئوية؛ اختر قيمة تناسب الشريط والفراغ المطلوب. [1] [2]

يفترض مثالنا تمريرًا رأسيًا وشريطًا أعلى النافذة بارتفاع 64 بكسل. نختار 80 بكسل لترك 16 بكسل تحته؛ الأرقام خاصة بهذا المثال. [2]

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

مرّر الشيفرة أفقيًا عند الحاجة.

#schedule {
  scroll-margin-top: 80px;
}

اختبر الوصول بعد تغيير العرض

اختبر الرابط وscrollIntoView بمحاذاة start؛ الإزاحة تترك مساحة أسفل الشريط، لكنها لا تقيس ارتفاعه تلقائيًا. [2]

انقر الرابط من أعلى الصفحة، ثم جرّب الاستدعاء التالي. عند زيادة ارتفاع الشريط على الهاتف، حدّث الإزاحة وأعد الاختبار. [2]

تحدد scroll-margin امتداد المنطقة التي تؤخذ في حساب الوصول إلى العنصر. لا تستخدمها لإضافة فراغ عادي بين العنوان والفقرة السابقة؛ هذا سؤال تخطيط مختلف. افحص النتيجة عند الانتقال إلى الهدف، لا بمجرد النظر إلى الصفحة قبل التمرير. [3]

مرّر الشيفرة أفقيًا عند الحاجة.

document.getElementById("schedule").scrollIntoView({
  block: "start",
  behavior: "instant"
});

اضبط حاوية التمرير عند الحاجة

تضبط scroll-padding-top المنطقة المناسبة للعرض من جهة حاوية التمرير؛ استخدمها عندما يكون الاستبعاد متعلقًا بالحاوية. [4]

إذا كان شريط يغطي أعلى مساحة التمرير، يمكن تحديد الجزء المستبعد على الحاوية. أما scroll-margin-top فيخص مساحة العنصر الهدف. اختر الموضع الذي يعبّر عن تصميمك، واختبره قبل الجمع بين الإعدادين. [4] [3]

للتمرير في الصفحة نفسها، تُطبّق قيمة scroll-padding على html على نافذة المستند؛ لا تنتقل إليها تلقائيًا من body. جرّب البديل التالي بعد إزالة قاعدة scroll-margin-top السابقة. [3]

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

مرّر الشيفرة أفقيًا عند الحاجة.

html {
  scroll-padding-top: 80px;
}