ಆಂಕರ್ ನ್ಯಾವಿಗೇಷನ್‌ನಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ: CSS ಸ್ಕ್ರಾಲ್ ಮಾರ್ಜಿನ್‌ಗಳ ಆಳವಾದ ನೋಟ

ಆಧುನಿಕ ವೆಬ್ ವಿನ್ಯಾಸದ ಜಗತ್ತಿನಲ್ಲಿ, ಸುಗಮ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುವುದು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ಇಂದಿನ ದಿನಗಳಲ್ಲಿ ನಾವು ಕಾಣುವ ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಯುಐ (UI) ಪ್ಯಾಟರ್ನ್‌ಗಳಲ್ಲಿ ಒಂದು ಸ್ಟಿಕ್ಕಿ ಅಥವಾ ಫಿಕ್ಸೆಡ್ ಹೆಡರ್ ಆಗಿದೆ. ಬಳಕೆದಾರರು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ ಇದು ಪ್ರಾಥಮಿಕ ನ್ಯಾವಿಗೇಷನ್, ಬ್ರ್ಯಾಂಡಿಂಗ್, ಮತ್ತು ಪ್ರಮುಖ ಕಾಲ್-ಟು-ಆಕ್ಷನ್‌ಗಳನ್ನು ನಿರಂತರವಾಗಿ ಲಭ್ಯವಾಗುವಂತೆ ಮಾಡುತ್ತದೆ. ಇದು ಅತ್ಯಂತ ಉಪಯುಕ್ತವಾಗಿದ್ದರೂ, ಈ ಪ್ಯಾಟರ್ನ್ ಒಂದು ಕ್ಲಾಸಿಕ್, ನಿರಾಶಾದಾಯಕ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ: ಮರೆಯಾದ ಆಂಕರ್ ಲಿಂಕ್‌ಗಳು.

ನೀವು ಇದನ್ನು ನಿಸ್ಸಂದೇಹವಾಗಿ ಅನುಭವಿಸಿದ್ದೀರಿ. ನೀವು ವಿಷಯ ಪಟ್ಟಿಯಲ್ಲಿರುವ (table of contents) ಲಿಂಕ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡುತ್ತೀರಿ, ಮತ್ತು ಬ್ರೌಸರ್ ಆ ವಿಭಾಗಕ್ಕೆ ಸರಿಯಾಗಿ ಜಿಗಿಯುತ್ತದೆ, ಆದರೆ ಆ ವಿಭಾಗದ ಹೆಡಿಂಗ್ ಸ್ಟಿಕ್ಕಿ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್‌ನ ಹಿಂದೆ ಅಂದವಾಗಿ ಅಡಗಿರುತ್ತದೆ. ಇದರಿಂದ ಬಳಕೆದಾರರು ಸಂದರ್ಭವನ್ನು ಕಳೆದುಕೊಳ್ಳುತ್ತಾರೆ, ಗೊಂದಲಕ್ಕೊಳಗಾಗುತ್ತಾರೆ, ಮತ್ತು ನೀವು ಕಷ್ಟಪಟ್ಟು ಸೃಷ್ಟಿಸಿದ ಸುಂದರ ಅನುಭವವು ಕ್ಷಣಕಾಲ ಮುರಿದುಹೋಗುತ್ತದೆ. ದಶಕಗಳಿಂದ, ಡೆವಲಪರ್‌ಗಳು ಈ ಸಮಸ್ಯೆಯನ್ನು ಪ್ಯಾಡಿಂಗ್, ಸ್ಯೂಡೋ-ಎಲಿಮೆಂಟ್ಸ್ (pseudo-elements), ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿಕೊಂಡು ವಿವಿಧ ಚತುರ, ಆದರೆ ಅಪೂರ್ಣವಾದ ಹ್ಯಾಕ್‌ಗಳೊಂದಿಗೆ ಎದುರಿಸುತ್ತಾ ಬಂದಿದ್ದಾರೆ.

ಅದೃಷ್ಟವಶಾತ್, ಹ್ಯಾಕ್‌ಗಳ ಯುಗ ಮುಗಿದಿದೆ. CSS ವರ್ಕಿಂಗ್ ಗ್ರೂಪ್ ಈ ನಿರ್ದಿಷ್ಟ ಸಮಸ್ಯೆಗೆ ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ನಿರ್ಮಿಸಲಾದ, ಸೊಗಸಾದ ಮತ್ತು ದೃಢವಾದ ಪರಿಹಾರವನ್ನು ಒದಗಿಸಿದೆ: ಅದುವೇ scroll-margin ಪ್ರಾಪರ್ಟಿ. ಈ ಲೇಖನವು CSS ಸ್ಕ್ರಾಲ್ ಮಾರ್ಜಿನ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಅದರಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ ಸಾಧಿಸಲು ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯಾಗಿದೆ, ಇದು ನಿಮ್ಮ ಸೈಟ್‌ನ ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ನಿರಾಶೆಯ ಮೂಲದಿಂದ ಸಂತೋಷದ ತಾಣವಾಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ.

ಕ್ಲಾಸಿಕ್ ಸಮಸ್ಯೆ: ಮರೆಯಾದ ಆಂಕರ್ ಟಾರ್ಗೆಟ್

ಪರಿಹಾರವನ್ನು ಸಂಭ್ರಮಿಸುವ ಮೊದಲು, ಸಮಸ್ಯೆಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ವಿಶ್ಲೇಷಿಸೋಣ. ಇದು ಎರಡು ಮೂಲಭೂತ ವೆಬ್ ವೈಶಿಷ್ಟ್ಯಗಳ ನಡುವಿನ ಸರಳ ಸಂಘರ್ಷದಿಂದ ಉದ್ಭವಿಸುತ್ತದೆ: ಫ್ರಾಗ್ಮೆಂಟ್ ಐಡೆಂಟಿಫೈಯರ್‌ಗಳು (ಆಂಕರ್ ಲಿಂಕ್‌ಗಳು) ಮತ್ತು ಫಿಕ್ಸೆಡ್ ಪೊಸಿಶನಿಂಗ್ (fixed positioning).

ಇಲ್ಲಿದೆ ಒಂದು ವಿಶಿಷ್ಟ ಸನ್ನಿವೇಶ:

1. ರಚನೆ: ನಿಮ್ಮಲ್ಲಿ ವಿಭಿನ್ನ ವಿಭಾಗಗಳಿರುವ ಉದ್ದವಾದ ಸ್ಕ್ರೋಲಿಂಗ್ ಪುಟವಿದೆ. ಪ್ರತಿಯೊಂದು ಪ್ರಮುಖ ವಿಭಾಗವು `

   ನಮ್ಮ ಬಗ್ಗೆ

   ` ನಂತಹ ವಿಶಿಷ್ಟವಾದ `id` ಅಟ್ರಿಬ್ಯೂಟ್ ಹೊಂದಿರುವ ಹೆಡಿಂಗ್ ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ.
2. ನ್ಯಾವಿಗೇಷನ್: ಪುಟದ ಮೇಲ್ಭಾಗದಲ್ಲಿ, ನೀವು ನ್ಯಾವಿಗೇಷನ್ ಮೆನುವನ್ನು ಹೊಂದಿದ್ದೀರಿ. ಇದು ವಿಷಯ ಪಟ್ಟಿ ಅಥವಾ ಮುಖ್ಯ ಸೈಟ್ ನ್ಯಾವಿಗೇಷನ್ ಆಗಿರಬಹುದು. ಇದು `ನಮ್ಮ ಕಂಪನಿಯ ಬಗ್ಗೆ ತಿಳಿಯಿರಿ` ನಂತಹ ಆ ವಿಭಾಗದ ಐಡಿಗಳಿಗೆ (IDs) ಪಾಯಿಂಟ್ ಮಾಡುವ ಆಂಕರ್ ಲಿಂಕ್‌ಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ.
3. ಸ್ಟಿಕ್ಕಿ ಎಲಿಮೆಂಟ್: ನೀವು `position: sticky; top: 0;` ಅಥವಾ `position: fixed; top: 0;` ಎಂದು ಸ್ಟೈಲ್ ಮಾಡಿದ ಹೆಡರ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಹೊಂದಿದ್ದೀರಿ. ಈ ಎಲಿಮೆಂಟ್‌ಗೆ ನಿರ್ದಿಷ್ಟ ಎತ್ತರವಿರುತ್ತದೆ, ಉದಾಹರಣೆಗೆ, 80 ಪಿಕ್ಸೆಲ್‌ಗಳು.
4. ಪರಸ್ಪರ ಕ್ರಿಯೆ: ಬಳಕೆದಾರರು "ನಮ್ಮ ಕಂಪನಿಯ ಬಗ್ಗೆ ತಿಳಿಯಿರಿ" ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುತ್ತಾರೆ.
5. ಬ್ರೌಸರ್‌ನ ವರ್ತನೆ: ಬ್ರೌಸರ್‌ನ ಡೀಫಾಲ್ಟ್ ವರ್ತನೆಯು ಪುಟವನ್ನು ಸ್ಕ್ರಾಲ್ ಮಾಡುವುದು, ಇದರಿಂದ ಟಾರ್ಗೆಟ್ ಎಲಿಮೆಂಟ್‌ನ (`id="about-us"` ಹೊಂದಿರುವ `

   `) ಮೇಲಿನ ಅಂಚು ವ್ಯೂಪೋರ್ಟ್‌ನ ಮೇಲಿನ ಅಂಚಿನೊಂದಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ.

6. ಸಂಘರ್ಷ: ನಿಮ್ಮ 80-ಪಿಕ್ಸೆಲ್ ಎತ್ತರದ ಸ್ಟಿಕ್ಕಿ ಹೆಡರ್ ವ್ಯೂಪೋರ್ಟ್‌ನ ಮೇಲ್ಭಾಗವನ್ನು ಆಕ್ರಮಿಸಿಕೊಂಡಿರುವುದರಿಂದ, ಅದು ಈಗ ಬ್ರೌಸರ್ ವೀಕ್ಷಣೆಗೆ ತಂದ `

   ` ಎಲಿಮೆಂಟ್ ಅನ್ನು ಆವರಿಸುತ್ತದೆ. ಬಳಕೆದಾರರು ಹೆಡಿಂಗ್‌ನ *ಕೆಳಗಿನ* ವಿಷಯವನ್ನು ನೋಡುತ್ತಾರೆ, ಆದರೆ ಹೆಡಿಂಗ್ ಅನ್ನೇ ನೋಡುವುದಿಲ್ಲ.

ಇದು ದೋಷವಲ್ಲ; ಈ ವ್ಯವಸ್ಥೆಗಳು ಸ್ವತಂತ್ರವಾಗಿ ಕೆಲಸ ಮಾಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ತಾರ್ಕಿಕ ಫಲಿತಾಂಶವಷ್ಟೇ. ಸ್ಕ್ರೋಲಿಂಗ್ ವ್ಯವಸ್ಥೆಗೆ ವ್ಯೂಪೋರ್ಟ್‌ನ ಮೇಲೆ ಇರುವ ಫಿಕ್ಸೆಡ್-ಪೊಸಿಶನ್ ಎಲಿಮೆಂಟ್‌ನ ಬಗ್ಗೆ ಅಂತರ್ಗತವಾಗಿ ತಿಳಿದಿರುವುದಿಲ್ಲ. ಈ ಸರಳ ಸಂಘರ್ಷವು ವರ್ಷಗಳ ಕಾಲ ಸೃಜನಾತ್ಮಕ ಪರಿಹಾರಗಳಿಗೆ ಕಾರಣವಾಗಿದೆ.

ಹಳೆಯ ಹ್ಯಾಕ್‌ಗಳು: ನೆನಪಿನಂಗಳಕ್ಕೆ ಒಂದು ಪಯಣ

`scroll-margin` ನ ಸೊಬಗನ್ನು ನಿಜವಾಗಿಯೂ ಪ್ರಶಂಸಿಸಲು, ನಾವು ಈ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು ಬಳಸುತ್ತಿದ್ದ 'ಹಳೆಯ ವಿಧಾನಗಳನ್ನು' ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಸಹಾಯಕವಾಗಿದೆ. ಈ ವಿಧಾನಗಳು ಇಂದಿಗೂ ವೆಬ್‌ನಾದ್ಯಂತ ಅಸಂಖ್ಯಾತ ಕೋಡ್‌ಬೇಸ್‌ಗಳಲ್ಲಿ ಅಸ್ತಿತ್ವದಲ್ಲಿವೆ, ಮತ್ತು ಅವುಗಳನ್ನು ಗುರುತಿಸುವುದು ಯಾವುದೇ ಡೆವಲಪರ್‌ಗೆ ಉಪಯುಕ್ತವಾಗಿದೆ.

ಹ್ಯಾಕ್ #1: ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ನೆಗೆಟಿವ್ ಮಾರ್ಜಿನ್ ಟ್ರಿಕ್

ಇದು ಆರಂಭಿಕ ಮತ್ತು ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ CSS-ಮಾತ್ರದ ಪರಿಹಾರಗಳಲ್ಲಿ ಒಂದಾಗಿತ್ತು. ಇದರ ಉದ್ದೇಶವೆಂದರೆ, ಜಾಗವನ್ನು ಸೃಷ್ಟಿಸಲು ಟಾರ್ಗೆಟ್ ಎಲಿಮೆಂಟ್‌ನ ಮೇಲ್ಭಾಗಕ್ಕೆ ಪ್ಯಾಡಿಂಗ್ ಸೇರಿಸುವುದು, ಮತ್ತು ನಂತರ ಎಲಿಮೆಂಟ್‌ನ ವಿಷಯವನ್ನು ಅದರ ಮೂಲ ದೃಶ್ಯ ಸ್ಥಾನಕ್ಕೆ ಹಿಂತಿರುಗಿಸಲು ನಕಾರಾತ್ಮಕ ಮಾರ್ಜಿನ್ ಬಳಸುವುದು.

ಉದಾಹರಣೆ ಕೋಡ್:

CSS
.sticky-header { height: 80px; position: sticky; top: 0; }
h2[id] {
padding-top: 80px; /* ಹೆಡರ್‌ನ ಎತ್ತರಕ್ಕೆ ಸಮಾನವಾದ ಜಾಗವನ್ನು ರಚಿಸಿ */
margin-top: -80px; /* ಎಲಿಮೆಂಟ್‌ನ ವಿಷಯವನ್ನು ಮತ್ತೆ ಮೇಲಕ್ಕೆ ಎಳೆಯಿರಿ */
}

ಇದು ಹ್ಯಾಕ್ ಏಕೆ:

• ಬಾಕ್ಸ್ ಮಾಡೆಲ್ ಅನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ: ಇದು ನೇರವಾಗಿ ಎಲಿಮೆಂಟ್‌ನ ಲೇಔಟ್ ಅನ್ನು ಅಸಹಜ ರೀತಿಯಲ್ಲಿ ಬದಲಾಯಿಸುತ್ತದೆ. ಹೆಚ್ಚುವರಿ ಪ್ಯಾಡಿಂಗ್ ಹಿನ್ನೆಲೆ ಬಣ್ಣಗಳು, ಬಾರ್ಡರ್‌ಗಳು ಮತ್ತು ಎಲಿಮೆಂಟ್‌ಗೆ ಅನ್ವಯಿಸಲಾದ ಇತರ ಸ್ಟೈಲಿಂಗ್‌ಗಳೊಂದಿಗೆ ಮಧ್ಯಪ್ರವೇಶಿಸಬಹುದು.
• ದುರ್ಬಲವಾಗಿದೆ (Brittle): ಇದು ಹೆಡರ್‌ನ ಎತ್ತರ ಮತ್ತು ಟಾರ್ಗೆಟ್ ಎಲಿಮೆಂಟ್‌ನ ಸ್ಟೈಲಿಂಗ್ ನಡುವೆ ಬಿಗಿಯಾದ ಸಂಬಂಧವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ವಿನ್ಯಾಸಕರು ಹೆಡರ್ ಎತ್ತರವನ್ನು ಬದಲಾಯಿಸಲು ನಿರ್ಧರಿಸಿದರೆ, ಡೆವಲಪರ್ ಈ ಪ್ಯಾಡಿಂಗ್/ಮಾರ್ಜಿನ್ ನಿಯಮವನ್ನು ಬಳಸಿದ ಎಲ್ಲೆಡೆ ಹುಡುಕಿ ನವೀಕರಿಸುವುದನ್ನು ನೆನಪಿಟ್ಟುಕೊಳ್ಳಬೇಕು.
• ಸೆಮ್ಯಾಂಟಿಕ್ ಅಲ್ಲ: ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಮಾರ್ಜಿನ್ ಸಂಪೂರ್ಣವಾಗಿ ಯಾಂತ್ರಿಕ ಸ್ಕ್ರೋಲಿಂಗ್ ಉದ್ದೇಶಕ್ಕಾಗಿ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ, ಯಾವುದೇ ನಿಜವಾದ ಲೇಔಟ್ ಅಥವಾ ವಿನ್ಯಾಸದ ಕಾರಣಕ್ಕಾಗಿ ಅಲ್ಲ, ಇದು ಕೋಡ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಷ್ಟಕರವಾಗಿಸುತ್ತದೆ.

ಹ್ಯಾಕ್ #2: ಸ್ಯೂಡೋ-ಎಲಿಮೆಂಟ್ ಟ್ರಿಕ್

ಸ್ವಲ್ಪ ಹೆಚ್ಚು ಅತ್ಯಾಧುನಿಕವಾದ CSS-ಮಾತ್ರದ ವಿಧಾನವೆಂದರೆ ಟಾರ್ಗೆಟ್ ಮೇಲೆ ಸ್ಯೂಡೋ-ಎಲಿಮೆಂಟ್ (`::before`) ಅನ್ನು ಬಳಸುವುದು. ಸ್ಯೂಡೋ-ಎಲಿಮೆಂಟ್ ಅನ್ನು ನಿಜವಾದ ಎಲಿಮೆಂಟ್‌ನ ಮೇಲೆ ಇರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅದು ಅದೃಶ್ಯ ಸ್ಕ್ರಾಲ್ ಟಾರ್ಗೆಟ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ ಕೋಡ್:

CSS
h2[id] {
position: relative;
}

h2[id]::before {
content: "";
display: block;
height: 90px; /* ಹೆಡರ್ ಎತ್ತರ + ಸ್ವಲ್ಪ ಖಾಲಿ ಜಾಗ */
margin-top: -90px;
visibility: hidden;
}

ಇದು ಹ್ಯಾಕ್ ಏಕೆ:

• ಹೆಚ್ಚು ಸಂಕೀರ್ಣ: ಇದು ಚತುರತೆಯಿಂದ ಕೂಡಿದೆ, ಆದರೆ ಇದು ಸಂಕೀರ್ಣತೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ ಮತ್ತು ಈ ಪ್ಯಾಟರ್ನ್ ಬಗ್ಗೆ ಪರಿಚಯವಿಲ್ಲದ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅಷ್ಟು ಸ್ಪಷ್ಟವಾಗಿರುವುದಿಲ್ಲ.
• ಸ್ಯೂಡೋ-ಎಲಿಮೆಂಟ್ ಅನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತದೆ: ಇದು `::before` ಸ್ಯೂಡೋ-ಎಲಿಮೆಂಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ, ಇದು ಅದೇ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ ಇತರ ಅಲಂಕಾರಿಕ ಅಥವಾ ಕ್ರಿಯಾತ್ಮಕ ಉದ್ದೇಶಗಳಿಗಾಗಿ ಬೇಕಾಗಬಹುದು.
• ಇನ್ನೂ ಒಂದು ಹ್ಯಾಕ್: ಇದು ಟಾರ್ಗೆಟ್ ಎಲಿಮೆಂಟ್‌ನ ನೇರ ಬಾಕ್ಸ್ ಮಾಡೆಲ್ ಅನ್ನು ಹಾಳು ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಿದರೂ, ಇದು ಇನ್ನೂ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅವುಗಳ ಉದ್ದೇಶಿತ ಉದ್ದೇಶಕ್ಕಿಂತ ಬೇರೆ ಯಾವುದಕ್ಕೋ ಬಳಸುವ ಒಂದು ಪರ್ಯಾಯ ಮಾರ್ಗವಾಗಿದೆ.

ಹ್ಯಾಕ್ #3: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಧ್ಯಪ್ರವೇಶ

ಅಂತಿಮ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ, ಅನೇಕ ಡೆವಲಪರ್‌ಗಳು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗೆ ಮೊರೆಹೋದರು. ಸ್ಕ್ರಿಪ್ಟ್ ಎಲ್ಲಾ ಆಂಕರ್ ಲಿಂಕ್‌ಗಳ ಮೇಲಿನ ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಅನ್ನು ಹೈಜಾಕ್ ಮಾಡುತ್ತದೆ, ಡೀಫಾಲ್ಟ್ ಬ್ರೌಸರ್ ಜಿಗಿತವನ್ನು ತಡೆಯುತ್ತದೆ, ಹೆಡರ್‌ನ ಎತ್ತರವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ ಮತ್ತು ನಂತರ ಪುಟವನ್ನು ಸರಿಯಾದ ಸ್ಥಾನಕ್ಕೆ ಹಸ್ತಚಾಲಿತವಾಗಿ ಸ್ಕ್ರಾಲ್ ಮಾಡುತ್ತದೆ.

ಉದಾಹರಣೆ ಕೋಡ್ (ಕಾನ್ಸೆಪ್ಟ್):

JavaScript
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const headerHeight = document.querySelector('.sticky-header').offsetHeight;
const targetElement = document.querySelector(this.getAttribute('href'));
if (targetElement) {
const elementPosition = targetElement.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - headerHeight;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
});
});

ಇದು ಹ್ಯಾಕ್ ಏಕೆ:

• ಅತಿಯಾಯಿತು (Overkill): ಇದು ಮೂಲಭೂತವಾಗಿ ಲೇಔಟ್ ಮತ್ತು ಪ್ರೆಸೆಂಟೇಶನ್ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು ಪ್ರಬಲವಾದ ಸ್ಕ್ರಿಪ್ಟಿಂಗ್ ಭಾಷೆಯನ್ನು ಬಳಸುತ್ತದೆ.
• ಕಾರ್ಯಕ್ಷಮತೆಯ ವೆಚ್ಚ: ಇದು ಸಾಮಾನ್ಯವಾಗಿ ನಗಣ್ಯವಾಗಿದ್ದರೂ, ಪುಟಕ್ಕೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಎಕ್ಸಿಕ್ಯೂಶನ್ ಓವರ್‌ಹೆಡ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ.
• ದುರ್ಬಲತೆ: ಕ್ಲಾಸ್ ಹೆಸರುಗಳು ಬದಲಾದರೆ ಸ್ಕ್ರಿಪ್ಟ್ ಮುರಿಯಬಹುದು. ಇದು ಡೈನಾಮಿಕ್ ಆಗಿ ಎತ್ತರವನ್ನು ಬದಲಾಯಿಸುವ ಹೆಡರ್‌ಗಳನ್ನು (ಉದಾಹರಣೆಗೆ, ವಿಂಡೋ ಮರುಗಾತ್ರಗೊಳಿಸಿದಾಗ) ಹೆಚ್ಚುವರಿ, ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಕೋಡ್ ಇಲ್ಲದೆ ಗಣನೆಗೆ ತೆಗೆದುಕೊಳ್ಳದಿರಬಹುದು.
• ಪ್ರವೇಶಿಸುವಿಕೆ ಕಾಳಜಿಗಳು (Accessibility Concerns): ಎಚ್ಚರಿಕೆಯಿಂದ ಕಾರ್ಯಗತಗೊಳಿಸದಿದ್ದರೆ, ಇದು ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ಪರಿಕರಗಳು ಮತ್ತು ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್‌ಗಾಗಿ ನಿರೀಕ್ಷಿತ ಬ್ರೌಸರ್ ನಡವಳಿಕೆಗೆ ಅಡ್ಡಿಪಡಿಸಬಹುದು. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿಷ್ಕ್ರಿಯಗೊಂಡರೆ ಅಥವಾ ಲೋಡ್ ಆಗಲು ವಿಫಲವಾದರೆ ಇದು ಸಂಪೂರ್ಣವಾಗಿ ವಿಫಲಗೊಳ್ಳುತ್ತದೆ.

ಆಧುನಿಕ ಪರಿಹಾರ: `scroll-margin` ಪರಿಚಯ

`scroll-margin` ಅನ್ನು ಪರಿಚಯಿಸೋಣ. ಈ CSS ಪ್ರಾಪರ್ಟಿ (ಮತ್ತು ಅದರ ಲಾಂಗ್‌ಹ್ಯಾಂಡ್ ರೂಪಾಂತರಗಳು) ಈ ವರ್ಗದ ಸಮಸ್ಯೆಗಳಿಗಾಗಿಯೇ ವಿಶೇಷವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಇದು ಎಲಿಮೆಂಟ್‌ನ ಸುತ್ತಲೂ ಒಂದು ಔಟ್‌ಸೆಟ್ ಮಾರ್ಜಿನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಇದನ್ನು ಸ್ಕ್ರಾಲ್ ಸ್ನ್ಯಾಪಿಂಗ್ ಪ್ರದೇಶವನ್ನು ಸರಿಹೊಂದಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.

ಇದನ್ನು ಒಂದು ಅದೃಶ್ಯ ಬಫರ್ ವಲಯವೆಂದು ಯೋಚಿಸಿ. ಬ್ರೌಸರ್ ಒಂದು ಎಲಿಮೆಂಟ್‌ಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಲು ಸೂಚನೆ ನೀಡಿದಾಗ (ಉದಾಹರಣೆಗೆ, ಆಂಕರ್ ಲಿಂಕ್ ಮೂಲಕ), ಅದು ಎಲಿಮೆಂಟ್‌ನ ಬಾರ್ಡರ್-ಬಾಕ್ಸ್ ಅನ್ನು ವ್ಯೂಪೋರ್ಟ್‌ನ ಅಂಚಿನೊಂದಿಗೆ ಜೋಡಿಸುವುದಿಲ್ಲ. ಬದಲಾಗಿ, ಇದು `scroll-margin` ಪ್ರದೇಶವನ್ನು ಜೋಡಿಸುತ್ತದೆ. ಇದರರ್ಥ ನಿಜವಾದ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಕೆಳಗೆ ತಳ್ಳಲಾಗುತ್ತದೆ, ಸ್ಟಿಕ್ಕಿ ಹೆಡರ್‌ನ ಕೆಳಗೆ, ಅದರ ಲೇಔಟ್ ಮೇಲೆ ಯಾವುದೇ ರೀತಿಯಲ್ಲಿ ಪರಿಣಾಮ ಬೀರದೆ.

ಮುಖ್ಯ ಆಕರ್ಷಣೆ: `scroll-margin-top`

ನಮ್ಮ ಸ್ಟಿಕ್ಕಿ ಹೆಡರ್ ಸಮಸ್ಯೆಗೆ, ಅತ್ಯಂತ ನೇರ ಮತ್ತು ಉಪಯುಕ್ತ ಪ್ರಾಪರ್ಟಿ `scroll-margin-top`. ಇದು ಎಲಿಮೆಂಟ್‌ನ ಮೇಲಿನ ಅಂಚಿಗೆ ನಿರ್ದಿಷ್ಟವಾಗಿ ಆಫ್‌ಸೆಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.

ಈ ಆಧುನಿಕ, ಸೊಗಸಾದ ಪರಿಹಾರವನ್ನು ಬಳಸಿಕೊಂಡು ನಮ್ಮ ಹಿಂದಿನ ಸನ್ನಿವೇಶವನ್ನು ಮರುರಚಿಸೋಣ. ಇನ್ನು ಮುಂದೆ ನೆಗೆಟಿವ್ ಮಾರ್ಜಿನ್‌ಗಳಿಲ್ಲ, ಸ್ಯೂಡೋ-ಎಲಿಮೆಂಟ್‌ಗಳಿಲ್ಲ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಲ್ಲ.

ಉದಾಹರಣೆ ಕೋಡ್:

HTML
<header class="site-header">... ನಿಮ್ಮ ನ್ಯಾವಿಗೇಷನ್ ...</header>
<main>
<h2 id="section-one">ವಿಭಾಗ ಒಂದು</h2>
<p>ಮೊದಲ ವಿಭಾಗದ ವಿಷಯ...</p>
<h2 id="section-two">ವಿಭಾಗ ಎರಡು</h2>
<p>ಎರಡನೇ ವಿಭಾಗದ ವಿಷಯ...</p>
</main>

CSS
.site-header {
position: sticky;
top: 0;
height: 80px;
background-color: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ಇದೇ ಮ್ಯಾಜಿಕ್ ಲೈನ್! */
h2[id] {
scroll-margin-top: 90px; /* ಹೆಡರ್ ಎತ್ತರ (80px) + 10px ಖಾಲಿ ಜಾಗ */
}

ಅಷ್ಟೇ. ಇದು ಒಂದು ಸಾಲಿನ ಸ್ವಚ್ಛ, ಘೋಷಣಾತ್ಮಕ ಮತ್ತು ಸ್ವಯಂ-ದಾಖಲಿಸುವ CSS ಆಗಿದೆ. ಬಳಕೆದಾರರು `#section-one` ಗೆ ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಬ್ರೌಸರ್ `

` ನ 90 ಪಿಕ್ಸೆಲ್‌ಗಳ *ಮೇಲಿರುವ* ಬಿಂದುವು ವ್ಯೂಪೋರ್ಟ್‌ನ ಮೇಲ್ಭಾಗವನ್ನು ತಲುಪುವವರೆಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುತ್ತದೆ. ಇದು ನಿಮ್ಮ 80-ಪಿಕ್ಸೆಲ್ ಹೆಡರ್‌ನ ಕೆಳಗೆ ಹೆಡಿಂಗ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಗೋಚರಿಸುವಂತೆ ಮಾಡುತ್ತದೆ, ಜೊತೆಗೆ 10 ಪಿಕ್ಸೆಲ್‌ಗಳ ಆರಾಮದಾಯಕ ಹೆಚ್ಚುವರಿ ಜಾಗವನ್ನು ನೀಡುತ್ತದೆ.

ಪ್ರಯೋಜನಗಳು ತಕ್ಷಣವೇ ಸ್ಪಷ್ಟವಾಗುತ್ತವೆ:

• ಕಾರ್ಯಗಳ ಪ್ರತ್ಯೇಕತೆ: ಸ್ಕ್ರೋಲಿಂಗ್ ನಡವಳಿಕೆಯನ್ನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಅವಲಂಬಿಸದೆ, ಅದಕ್ಕೆ ಸೇರಿದ ಸ್ಥಳವಾದ CSS ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ. ಎಲಿಮೆಂಟ್‌ನ ಲೇಔಟ್ ಮೇಲೆ ಯಾವುದೇ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ.
• ಸರಳತೆ ಮತ್ತು ಓದಲು ಸುಲಭ: `scroll-margin-top` ಪ್ರಾಪರ್ಟಿ ಅದು ಏನು ಮಾಡುತ್ತದೆ ಎಂಬುದನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ವಿವರಿಸುತ್ತದೆ. ಈ ಕೋಡ್ ಓದುವ ಯಾವುದೇ ಡೆವಲಪರ್ ಅದರ ಉದ್ದೇಶವನ್ನು ತಕ್ಷಣವೇ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತಾರೆ.
• ದೃಢತೆ: ಇದು ಸಮಸ್ಯೆಯನ್ನು ನಿಭಾಯಿಸಲು ಪ್ಲಾಟ್‌ಫಾರ್ಮ್-ನೇಟಿವ್ ಮಾರ್ಗವಾಗಿದೆ, ಇದು ಯಾವುದೇ ಸ್ಕ್ರಿಪ್ಟೆಡ್ ಪರಿಹಾರಕ್ಕಿಂತ ಹೆಚ್ಚು ದಕ್ಷ ಮತ್ತು ವಿಶ್ವಾಸಾರ್ಹವಾಗಿಸುತ್ತದೆ.
• ನಿರ್ವಹಣೆ ಸುಲಭ: ಹಳೆಯ ಹ್ಯಾಕ್‌ಗಳಿಗಿಂತ ಇದನ್ನು ನಿರ್ವಹಿಸುವುದು ತುಂಬಾ ಸುಲಭ. ನಾವು ಇದನ್ನು CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳೊಂದಿಗೆ ಮತ್ತಷ್ಟು ಸುಧಾರಿಸಬಹುದು, ಅದನ್ನು ನಾವು ಶೀಘ್ರದಲ್ಲೇ ಚರ್ಚಿಸುತ್ತೇವೆ.

`scroll-margin` ಪ್ರಾಪರ್ಟಿಗಳ ಆಳವಾದ ನೋಟ

ಸ್ಟಿಕ್ಕಿ ಹೆಡರ್ ಸಮಸ್ಯೆಗೆ `scroll-margin-top` ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ನಾಯಕನಾಗಿದ್ದರೂ, `scroll-margin` ಕುಟುಂಬವು ಅದಕ್ಕಿಂತ ಹೆಚ್ಚು ಬಹುಮುಖವಾಗಿದೆ. ಇದು ಅದರ ರಚನೆಯಲ್ಲಿ ಪರಿಚಿತ `margin` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಹೋಲುತ್ತದೆ.

ಲಾಂಗ್‌ಹ್ಯಾಂಡ್ ಮತ್ತು ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಪ್ರಾಪರ್ಟಿಗಳು

`margin` ನಂತೆಯೇ, ನೀವು ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಅಥವಾ ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್‌ನೊಂದಿಗೆ ಹೊಂದಿಸಬಹುದು:

• scroll-margin-top
• scroll-margin-right
• scroll-margin-bottom
• scroll-margin-left

ಮತ್ತು ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಪ್ರಾಪರ್ಟಿ, `scroll-margin`, ಇದು `margin` ನಂತೆಯೇ ಒಂದರಿಂದ ನಾಲ್ಕು ಮೌಲ್ಯಗಳ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಅನುಸರಿಸುತ್ತದೆ:

CSS
.target-element {
/* ಮೇಲೆ | ಬಲ | ಕೆಳಗೆ | ಎಡ */
scroll-margin: 90px 20px 20px 20px;

/* ಇದಕ್ಕೆ ಸಮಾನ: */
scroll-margin-top: 90px;
scroll-margin-right: 20px;
scroll-margin-bottom: 20px;
scroll-margin-left: 20px;
}

ಈ ಇತರ ಪ್ರಾಪರ್ಟಿಗಳು ಹೆಚ್ಚು ಸುಧಾರಿತ ಸ್ಕ್ರೋಲಿಂಗ್ ಇಂಟರ್ಫೇಸ್‌ಗಳಲ್ಲಿ, ಉದಾಹರಣೆಗೆ ಪೂರ್ಣ-ಪುಟದ ಸ್ಕ್ರಾಲ್-ಸ್ನ್ಯಾಪಿಂಗ್ ಕ್ಯಾರೊಸೆಲ್‌ಗಳಲ್ಲಿ, ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿವೆ, ಅಲ್ಲಿ ಸ್ಕ್ರಾಲ್ ಮಾಡಿದ ಐಟಂ ತನ್ನ ಕಂಟೇನರ್‌ನ ಅಂಚುಗಳಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ತಾಗಿಕೊಂಡಿರದಂತೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನೀವು ಬಯಸಬಹುದು.

ಜಾಗತಿಕವಾಗಿ ಯೋಚಿಸುವುದು: ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟಿಗಳು

ನಿಜವಾಗಿಯೂ ಜಾಗತಿಕ-ಸಿದ್ಧ CSS ಬರೆಯಲು, ಸಾಧ್ಯವಾದಲ್ಲೆಲ್ಲಾ ಭೌತಿಕ ಪ್ರಾಪರ್ಟಿಗಳ ಬದಲು ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸುವುದು ಉತ್ತಮ ಅಭ್ಯಾಸವಾಗಿದೆ. ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟಿಗಳು ಭೌತಿಕ ದಿಕ್ಕುಗಳ (`top`, `left`, `right`, `bottom`) ಬದಲು ಪಠ್ಯದ ಹರಿವಿನ (`start` ಮತ್ತು `end`) ಮೇಲೆ ಆಧಾರಿತವಾಗಿವೆ. ಇದು ನಿಮ್ಮ ಲೇಔಟ್ ಅರೇಬಿಕ್ ಅಥವಾ ಹೀಬ್ರೂ ನಂತಹ ಬಲದಿಂದ-ಎಡಕ್ಕೆ (RTL) ಭಾಷೆಗಳು ಅಥವಾ ಲಂಬ ಬರವಣಿಗೆಯ ವಿಧಾನಗಳಂತಹ ವಿವಿಧ ಬರವಣಿಗೆಯ ವಿಧಾನಗಳಿಗೆ ಸರಿಯಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

`scroll-margin` ಕುಟುಂಬವು ಸಂಪೂರ್ಣ ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟಿಗಳ ಗುಂಪನ್ನು ಹೊಂದಿದೆ:

• scroll-margin-block-start: ಪ್ರಮಾಣಿತ ಸಮತಲ, ಮೇಲಿನಿಂದ-ಕೆಳಕ್ಕೆ ಬರವಣಿಗೆಯ ಕ್ರಮದಲ್ಲಿ `scroll-margin-top` ಗೆ ಅನುರೂಪವಾಗಿದೆ.
• scroll-margin-block-end: `scroll-margin-bottom` ಗೆ ಅನುರೂಪವಾಗಿದೆ.
• scroll-margin-inline-start: ಎಡದಿಂದ-ಬಲಕ್ಕೆ ಸಂದರ್ಭದಲ್ಲಿ `scroll-margin-left` ಗೆ ಅನುರೂಪವಾಗಿದೆ.
• scroll-margin-inline-end: ಎಡದಿಂದ-ಬಲಕ್ಕೆ ಸಂದರ್ಭದಲ್ಲಿ `scroll-margin-right` ಗೆ ಅನುರೂಪವಾಗಿದೆ.

ನಮ್ಮ ಸ್ಟಿಕ್ಕಿ ಹೆಡರ್ ಉದಾಹರಣೆಗಾಗಿ, ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟಿ ಬಳಸುವುದು ಹೆಚ್ಚು ದೃಢ ಮತ್ತು ಭವಿಷ್ಯ-ನಿರೋಧಕವಾಗಿದೆ:

CSS
h2[id] {
/* ಇದು ಆಧುನಿಕ, ಆದ್ಯತೆಯ ವಿಧಾನ */
scroll-margin-block-start: 90px;
}

ಈ ಒಂದೇ ಬದಲಾವಣೆಯು ನಿಮ್ಮ ಸ್ಕ್ರೋಲಿಂಗ್ ನಡವಳಿಕೆಯನ್ನು ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಭಾಷೆ ಮತ್ತು ಪಠ್ಯದ ದಿಕ್ಕನ್ನು ಲೆಕ್ಕಿಸದೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸರಿಪಡಿಸುತ್ತದೆ. ಇದು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ನಿರ್ಮಿಸುವ ಬದ್ಧತೆಯನ್ನು ಪ್ರದರ್ಶಿಸುವ ಒಂದು ಸಣ್ಣ ವಿವರವಾಗಿದೆ.

ಪರಿಷ್ಕೃತ UX ಗಾಗಿ ಸ್ಮೂತ್ ಸ್ಕ್ರೋಲಿಂಗ್‌ನೊಂದಿಗೆ ಸಂಯೋಜಿಸುವುದು

`scroll-margin` ಪ್ರಾಪರ್ಟಿ ಮತ್ತೊಂದು ಆಧುನಿಕ CSS ಪ್ರಾಪರ್ಟಿಯೊಂದಿಗೆ ಸುಂದರವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ: `scroll-behavior`. ರೂಟ್ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ `scroll-behavior: smooth;` ಅನ್ನು ಹೊಂದಿಸುವ ಮೂಲಕ, ನೀವು ಬ್ರೌಸರ್‌ಗೆ ಅದರ ಆಂಕರ್ ಲಿಂಕ್ ಜಿಗಿತಗಳನ್ನು ತಕ್ಷಣವೇ ಸ್ನ್ಯಾಪ್ ಮಾಡುವ ಬದಲು ಅನಿಮೇಟ್ ಮಾಡಲು ಹೇಳುತ್ತೀರಿ.

ನೀವು ಎರಡನ್ನೂ ಸಂಯೋಜಿಸಿದಾಗ, ಕೆಲವೇ ಸಾಲುಗಳ CSS ನೊಂದಿಗೆ ನೀವು ವೃತ್ತಿಪರ, ಪರಿಷ್ಕೃತ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಪಡೆಯುತ್ತೀರಿ:

CSS
html {
scroll-behavior: smooth;
}

.site-header {
position: sticky;
top: 0;
height: 80px;
}

[id] {
/* ಸಂಭಾವ್ಯ ಸ್ಕ್ರಾಲ್ ಟಾರ್ಗೆಟ್ ಮಾಡಲು ಐಡಿ (ID) ಹೊಂದಿರುವ ಯಾವುದೇ ಎಲಿಮೆಂಟ್‌ಗೆ ಅನ್ವಯಿಸಿ */
scroll-margin-top: 90px;
}

ಈ ಸೆಟಪ್‌ನೊಂದಿಗೆ, ಆಂಕರ್ ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವುದರಿಂದ ಒಂದು ಸುಂದರವಾದ ಸ್ಕ್ರಾಲ್ ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ, ಅದು ಟಾರ್ಗೆಟ್ ಎಲಿಮೆಂಟ್ ಸ್ಟಿಕ್ಕಿ ಹೆಡರ್‌ನ ಕೆಳಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಾನ ಪಡೆದು ಗೋಚರಿಸುವುದರೊಂದಿಗೆ ಕೊನೆಗೊಳ್ಳುತ್ತದೆ. ಯಾವುದೇ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿ ಅಗತ್ಯವಿಲ್ಲ.

ಪ್ರಾಯೋಗಿಕ ಪರಿಗಣನೆಗಳು ಮತ್ತು ಎಡ್ಜ್ ಕೇಸ್‌ಗಳು

`scroll-margin` ಶಕ್ತಿಯುತವಾಗಿದ್ದರೂ, ನಿಮ್ಮ ಅನುಷ್ಠಾನವನ್ನು ಇನ್ನಷ್ಟು ದೃಢವಾಗಿಸಲು ಇಲ್ಲಿ ಕೆಲವು ನೈಜ-ಪ್ರಪಂಚದ ಪರಿಗಣನೆಗಳಿವೆ.

CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳೊಂದಿಗೆ ಡೈನಾಮಿಕ್ ಹೆಡರ್ ಎತ್ತರಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು

`80px` ನಂತಹ ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳನ್ನು ಹಾರ್ಡ್-ಕೋಡಿಂಗ್ ಮಾಡುವುದು ನಿರ್ವಹಣೆಯ ತಲೆನೋವಿನ ಸಾಮಾನ್ಯ ಮೂಲವಾಗಿದೆ. ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಲ್ಲಿ ಹೆಡರ್ ಎತ್ತರ ಬದಲಾದರೆ ಏನು ಮಾಡುವುದು? ಅಥವಾ ಅದರ ಮೇಲೆ ಬ್ಯಾನರ್ ಸೇರಿಸಿದರೆ? ನೀವು ಎತ್ತರ ಮತ್ತು `scroll-margin-top` ಮೌಲ್ಯವನ್ನು ಅನೇಕ ಸ್ಥಳಗಳಲ್ಲಿ ನವೀಕರಿಸಬೇಕಾಗುತ್ತದೆ.

ಇದಕ್ಕೆ ಪರಿಹಾರವೆಂದರೆ CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು (ವೇರಿಯಬಲ್ಸ್) ಬಳಸುವುದು. ಹೆಡರ್ ಎತ್ತರವನ್ನು ವೇರಿಯಬಲ್ ಆಗಿ ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ, ನಾವು ಅದನ್ನು ಹೆಡರ್‌ನ ಸ್ಟೈಲ್ ಮತ್ತು ಟಾರ್ಗೆಟ್‌ನ ಸ್ಕ್ರಾಲ್ ಮಾರ್ಜಿನ್ ಎರಡರಲ್ಲೂ ಉಲ್ಲೇಖಿಸಬಹುದು.

CSS
:root {
--header-height: 80px;
--scroll-padding: 1rem; /* ಅಂತರಕ್ಕಾಗಿ ರಿಲೇಟಿವ್ ಯೂನಿಟ್ ಬಳಸಿ */
}

/* ರೆಸ್ಪಾನ್ಸಿವ್ ಹೆಡರ್ ಎತ್ತರ */
@media (max-width: 768px) {
:root {
--header-height: 60px;
}
}

.site-header {
position: sticky;
top: 0;
height: var(--header-height);
}

[id] {
scroll-margin-top: calc(var(--header-height) + var(--scroll-padding));
}

ಈ ವಿಧಾನವು ನಂಬಲಾಗದಷ್ಟು ಶಕ್ತಿಯುತವಾಗಿದೆ. ಈಗ, ನೀವು ಎಂದಾದರೂ ಹೆಡರ್‌ನ ಎತ್ತರವನ್ನು ಬದಲಾಯಿಸಬೇಕಾದರೆ, ನೀವು ಕೇವಲ `--header-height` ವೇರಿಯಬಲ್ ಅನ್ನು ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ನವೀಕರಿಸಿದರೆ ಸಾಕು. `scroll-margin-top` ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ಸಹ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನವೀಕರಿಸಲ್ಪಡುತ್ತದೆ. ಇದು DRY (Don't Repeat Yourself), ನಿರ್ವಹಿಸಬಹುದಾದ CSS ಬರೆಯುವಿಕೆಯ ಪರಾಕಾಷ್ಠೆಯಾಗಿದೆ.

ಬ್ರೌಸರ್ ಬೆಂಬಲ

`scroll-margin` ಬಗ್ಗೆ ಅತ್ಯುತ್ತಮ ಸುದ್ದಿ ಎಂದರೆ ಅದರ ಸಮಯ ಬಂದಿದೆ. ಇಂದಿನ ದಿನಾಂಕದಂದು, ಇದು Chrome, Firefox, Safari ಮತ್ತು Edge ಸೇರಿದಂತೆ ಎಲ್ಲಾ ಆಧುನಿಕ, ಎವರ್‌ಗ್ರೀನ್ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿದೆ. ಇದರರ್ಥ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರನ್ನು ಗುರಿಯಾಗಿಸಿಕೊಂಡು ಹೆಚ್ಚಿನ ಯೋಜನೆಗಳಿಗೆ, ನೀವು ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ವಿಶ್ವಾಸದಿಂದ ಬಳಸಬಹುದು.

ಅತ್ಯಂತ ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ (ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ 11 ನಂತಹ) ಬೆಂಬಲದ ಅಗತ್ಯವಿರುವ ಯೋಜನೆಗಳಿಗೆ, `scroll-margin` ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ. ಅಂತಹ ಸಂದರ್ಭಗಳಲ್ಲಿ, ನೀವು ಹಳೆಯ ಹ್ಯಾಕ್‌ಗಳಲ್ಲಿ ಒಂದನ್ನು ಫಾಲ್‌ಬ್ಯಾಕ್ ಆಗಿ ಬಳಸಬೇಕಾಗಬಹುದು. ಸಮರ್ಥ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಆಧುನಿಕ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಮತ್ತು ಇತರರಿಗೆ ಹ್ಯಾಕ್ ಅನ್ನು ಅನ್ವಯಿಸಲು ನೀವು CSS `@supports` ಕ್ವೆರಿಯನ್ನು ಬಳಸಬಹುದು:

CSS
/* ಲೆಗಸಿ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ಹಳೆಯ ಹ್ಯಾಕ್ */
[id] {
padding-top: 90px;
margin-top: -90px;
}

/* ಬೆಂಬಲಿತ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ಆಧುನಿಕ ಪ್ರಾಪರ್ಟಿ */
@supports (scroll-margin-top: 1px) {
[id] {
/* ಮೊದಲು, ಹಳೆಯ ಹ್ಯಾಕ್ ಅನ್ನು ರದ್ದುಮಾಡಿ */
padding-top: 0;
margin-top: 0;
/* ನಂತರ, ಉತ್ತಮ ಪರಿಹಾರವನ್ನು ಅನ್ವಯಿಸಿ */
scroll-margin-top: 90px;
}
}

ಆದಾಗ್ಯೂ, ಲೆಗಸಿ ಬ್ರೌಸರ್‌ಗಳ ಅವನತಿಯನ್ನು ಗಮನಿಸಿದರೆ, ಆಧುನಿಕ ಪ್ರಾಪರ್ಟಿಗಳೊಂದಿಗೆ ಮೊದಲು ನಿರ್ಮಿಸುವುದು ಮತ್ತು ಪ್ರಾಜೆಕ್ಟ್‌ನ ನಿರ್ಬಂಧಗಳಿಂದ ಸ್ಪಷ್ಟವಾಗಿ ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಪರಿಗಣಿಸುವುದು ಹೆಚ್ಚು ಪ್ರಾಯೋಗಿಕವಾಗಿದೆ.

ಪ್ರವೇಶಿಸುವಿಕೆಯಲ್ಲಿ ಗೆಲುವು (Accessibility Wins)

`scroll-margin` ಬಳಸುವುದು ಕೇವಲ ಡೆವಲಪರ್ ಅನುಕೂಲವಲ್ಲ; ಇದು ಪ್ರವೇಶಿಸುವಿಕೆಗೆ (accessibility) ಒಂದು ಮಹತ್ವದ ಗೆಲುವು. ಬಳಕೆದಾರರು ಕೀಬೋರ್ಡ್ ಬಳಸಿ ಪುಟವನ್ನು ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವಾಗ (ಉದಾಹರಣೆಗೆ, ಲಿಂಕ್‌ಗಳ ಮೂಲಕ ಟ್ಯಾಬ್ ಮಾಡಿ ಮತ್ತು ಇನ್-ಪೇಜ್ ಆಂಕರ್ ಮೇಲೆ ಎಂಟರ್ ಒತ್ತಿದಾಗ), ಬ್ರೌಸರ್‌ನ ಸ್ಕ್ರೋಲಿಂಗ್ ಪ್ರಚೋದಿಸಲ್ಪಡುತ್ತದೆ. ಟಾರ್ಗೆಟ್ ಹೆಡಿಂಗ್ ಮರೆಯಾಗದಂತೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಈ ಬಳಕೆದಾರರಿಗೆ ನಿರ್ಣಾಯಕ ಸಂದರ್ಭವನ್ನು ಒದಗಿಸುತ್ತೀರಿ.

ಅದೇ ರೀತಿ, ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬಳಕೆದಾರರು ಆಂಕರ್ ಲಿಂಕ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿದಾಗ, ಫೋಕಸ್‌ನ ದೃಶ್ಯ ಸ್ಥಳವು ಘೋಷಿಸಲಾಗುತ್ತಿರುವ ವಿಷಯದೊಂದಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ, ಇದು ಭಾಗಶಃ ದೃಷ್ಟಿ ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಸಂಭಾವ್ಯ ಗೊಂದಲವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಇದು ಎಲ್ಲಾ ಸಂವಾದಾತ್ಮಕ ಅಂಶಗಳು ಮತ್ತು ಅವುಗಳ ಪರಿಣಾಮವಾಗಿ ಉಂಟಾಗುವ ಕ್ರಿಯೆಗಳು ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಸ್ಪಷ್ಟವಾಗಿ ಗ್ರಹಿಸಬೇಕು ಎಂಬ ತತ್ವವನ್ನು ಎತ್ತಿಹಿಡಿಯುತ್ತದೆ.

ತೀರ್ಮಾನ: ಆಧುನಿಕ ಗುಣಮಟ್ಟವನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ

ಸ್ಟಿಕ್ಕಿ ಹೆಡರ್‌ಗಳಿಂದ ಆಂಕರ್ ಲಿಂಕ್‌ಗಳು ಮರೆಯಾಗುವ ಸಮಸ್ಯೆ, CSS ನಲ್ಲಿ ಅದನ್ನು ಪರಿಹರಿಸಲು ನಿರ್ದಿಷ್ಟ ಪರಿಕರಗಳ ಕೊರತೆಯಿದ್ದ ಕಾಲದ ಅವಶೇಷವಾಗಿದೆ. ನಾವು ಅಗತ್ಯದಿಂದ ಚತುರ ಹ್ಯಾಕ್‌ಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಿದ್ದೇವೆ, ಆದರೆ ಆ ಪರಿಹಾರಗಳು ನಿರ್ವಹಣೆ, ಸಂಕೀರ್ಣತೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ವೆಚ್ಚಗಳೊಂದಿಗೆ ಬಂದವು.

`scroll-margin` ಪ್ರಾಪರ್ಟಿಯೊಂದಿಗೆ, ನಾವು ಈಗ ಈ ಸಮಸ್ಯೆಯನ್ನು ಸ್ವಚ್ಛವಾಗಿ ಮತ್ತು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಪರಿಹರಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ CSS ಭಾಷೆಯಲ್ಲಿ ಪ್ರಥಮ ದರ್ಜೆಯ ನಾಗರಿಕರನ್ನು ಹೊಂದಿದ್ದೇವೆ. ಅದನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಕೇವಲ ಉತ್ತಮ ಕೋಡ್ ಬರೆಯುತ್ತಿಲ್ಲ; ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗಾಗಿ ನೀವು ಉತ್ತಮ, ಹೆಚ್ಚು ಊಹಿಸಬಹುದಾದ ಮತ್ತು ಹೆಚ್ಚು ಪ್ರವೇಶಿಸಬಹುದಾದ ಅನುಭವವನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದೀರಿ.

ನೀವು ತಿಳಿದುಕೊಳ್ಳಬೇಕಾದ ಪ್ರಮುಖ ಅಂಶಗಳು:

• ಸ್ಕ್ರೋಲಿಂಗ್ ಆಫ್‌ಸೆಟ್ ರಚಿಸಲು ನಿಮ್ಮ ಟಾರ್ಗೆಟ್ ಎಲಿಮೆಂಟ್‌ಗಳಲ್ಲಿ `scroll-margin-top` (ಅಥವಾ `scroll-margin-block-start`) ಬಳಸಿ.
• ನಿಮ್ಮ ಸ್ಟಿಕ್ಕಿ ಹೆಡರ್‌ನ ಎತ್ತರಕ್ಕೆ ಸತ್ಯದ ಒಂದೇ ಮೂಲವನ್ನು ರಚಿಸಲು ಇದನ್ನು CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ, ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ದೃಢ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲದನ್ನಾಗಿ ಮಾಡಿ.
• ಪರಿಷ್ಕೃತ, ವೃತ್ತಿಪರ ಅನುಭವಕ್ಕಾಗಿ `html` ಎಲಿಮೆಂಟ್‌ಗೆ `scroll-behavior: smooth;` ಸೇರಿಸಿ.
• ಈ ಕಾರ್ಯಕ್ಕಾಗಿ ಪ್ಯಾಡಿಂಗ್ ಹ್ಯಾಕ್‌ಗಳು, ಸ್ಯೂಡೋ-ಎಲಿಮೆಂಟ್‌ಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸುವುದನ್ನು ನಿಲ್ಲಿಸಿ. ವೆಬ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಒದಗಿಸುವ ಆಧುನಿಕ, ಉದ್ದೇಶ-ನಿರ್ಮಿತ ಪರಿಹಾರವನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ.

ಮುಂದಿನ ಬಾರಿ ನೀವು ಸ್ಟಿಕ್ಕಿ ಹೆಡರ್ ಮತ್ತು ವಿಷಯ ಪಟ್ಟಿಯೊಂದಿಗೆ ಪುಟವನ್ನು ನಿರ್ಮಿಸುವಾಗ, ಈ ಕೆಲಸಕ್ಕಾಗಿ ನಿಮ್ಮ ಬಳಿ ನಿರ್ಣಾಯಕ ಸಾಧನವಿದೆ. ಮುಂದುವರಿಯಿರಿ ಮತ್ತು ಸುಗಮ, ನಿರಾಶೆ-ಮುಕ್ತ ನ್ಯಾವಿಗೇಷನ್ ಅನುಭವಗಳನ್ನು ರಚಿಸಿ.