التمرير السلس وهامش الرصد | تتبع التمرير Scrollspy في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

توفر سمتان تصريحيتان تحكماً دقيقاً في تجربة التمرير وحساسية الرصد دون كتابة كود إضافي:

التمرير السلس data-bs-smooth-scroll="true" — ينقل القارئ بانسيابية بصرية ناعمة نحو القسم المقصود فور النقر على رابطه في الفهرس.
هامش منطقة الرصد data-bs-root-margin="0px 0px -40%" — يُمرَّر مباشرةً لخيار rootMargin في مراقب التقاطع؛ حيث يؤدي تقليص الحافة السفلية بنسبة -40% إلى تفعيل القسم عندما يدخل منطقة القراءة العلوية المريحة بدلاً من تفعيله بمجرد ظهور أول بكسل منه أسفل النافذة.

الصف 2 كود برمجي

HTML

<div data-bs-spy="scroll" data-bs-target="#sideToc"
  data-bs-root-margin="0px 0px -40%"
  data-bs-smooth-scroll="true" tabindex="0">
  <h4 id="item-1">1. Architecture</h4>
  <h5 id="item-1-1">1.1 Edge Nodes</h5>
</div>

جرّب بنفسك

الصف 3 ملاحظة هامة

Smooth Scroll Root Margin التمرير السلس وهامش الرصد

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (تتبع التمرير Scrollspy في بوتستراب 5)