ಸನ್ನಿವೇಶವು ಯಾವಾಗಲೂ ಒಂದೇ ಆಗಿರುತ್ತದೆ, ಇದು ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಕಂಟೇನರ್ನೊಳಗಿನ ಡೇಟಾ ಟೇಬಲ್ ಆಗಿದೆ. ಪ್ರತಿ ಸಾಲು ಕ್ರಿಯಾ ಮೆನುವನ್ನು ಹೊಂದಿದೆ, ಕೆಲವು ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಸಣ್ಣ ಡ್ರಾಪ್ಡೌನ್, ಎಡಿಟ್, ಡುಪ್ಲಿಕೇಟ್ ಮತ್ತು ಡಿಲೀಟ್. ನೀವು ಅದನ್ನು ನಿರ್ಮಿಸುತ್ತೀರಿ, ಅದು ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರತ್ಯೇಕವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ತೋರುತ್ತದೆ, ಮತ್ತು ನಂತರ ಯಾರಾದರೂ ಅದನ್ನು ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಡಿವಿಯೊಳಗೆ ಇರಿಸುತ್ತಾರೆ ಮತ್ತು ವಸ್ತುಗಳು ಕುಸಿಯುತ್ತವೆ. ನಾನು ಈ ನಿಖರವಾದ ದೋಷವನ್ನು ಮೂರು ವಿಭಿನ್ನ ಕೋಡ್ಬೇಸ್ಗಳಲ್ಲಿ ನೋಡಿದ್ದೇನೆ: ಕಂಟೇನರ್, ಸ್ಟಾಕ್ ಮತ್ತು ಫ್ರೇಮ್ವರ್ಕ್, ಎಲ್ಲವೂ ವಿಭಿನ್ನವಾಗಿದೆ. ಆದಾಗ್ಯೂ, ದೋಷವು ಸಂಪೂರ್ಣವಾಗಿ ಒಂದೇ ಆಗಿರುತ್ತದೆ. ಡ್ರಾಪ್ಡೌನ್ ಕಂಟೇನರ್ನ ಅಂಚಿನಲ್ಲಿ ಕ್ಲಿಪ್ ಆಗುತ್ತದೆ. ಅಥವಾ ತಾರ್ಕಿಕವಾಗಿ ಅದರ ಕೆಳಗೆ ಇರಬೇಕಾದ ವಿಷಯದ ಹಿಂದೆ ಅದು ತೋರಿಸುತ್ತದೆ. ಅಥವಾ ಬಳಕೆದಾರನು ಸ್ಕ್ರಾಲ್ ಮಾಡುವವರೆಗೆ ಅದು ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ನಂತರ ಅದು ಚಲಿಸುತ್ತದೆ. ನೀವು z-ಸೂಚ್ಯಂಕವನ್ನು ತಲುಪುತ್ತೀರಿ: 9999. ಕೆಲವೊಮ್ಮೆ ಇದು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಆದರೆ ಇತರ ಬಾರಿ ಅದು ಸಂಪೂರ್ಣವಾಗಿ ಏನನ್ನೂ ಮಾಡುವುದಿಲ್ಲ. ಆ ಅಸಂಗತತೆಯು ಆಳವಾದ ಏನಾದರೂ ನಡೆಯುತ್ತಿದೆ ಎಂಬುದಕ್ಕೆ ಮೊದಲ ಸುಳಿವು. ಇದು ಮತ್ತೆ ಬರಲು ಕಾರಣವೆಂದರೆ ಮೂರು ಪ್ರತ್ಯೇಕ ಬ್ರೌಸರ್ ಸಿಸ್ಟಂಗಳು ಒಳಗೊಂಡಿವೆ ಮತ್ತು ಹೆಚ್ಚಿನ ಡೆವಲಪರ್ಗಳು ಪ್ರತಿಯೊಂದನ್ನು ತಮ್ಮದೇ ಆದ ರೀತಿಯಲ್ಲಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತಾರೆ ಆದರೆ ಮೂರೂ ಡಿಕ್ಕಿ ಹೊಡೆದಾಗ ಏನಾಗುತ್ತದೆ ಎಂಬುದರ ಕುರಿತು ಎಂದಿಗೂ ಯೋಚಿಸುವುದಿಲ್ಲ: ಓವರ್ಫ್ಲೋ, ಸ್ಟ್ಯಾಕ್ ಮಾಡುವ ಸಂದರ್ಭಗಳು ಮತ್ತು ಬ್ಲಾಕ್ಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.
ಮೂವರೂ ಹೇಗೆ ಸಂವಹನ ನಡೆಸುತ್ತಾರೆ ಎಂಬುದನ್ನು ನೀವು ಅರ್ಥಮಾಡಿಕೊಂಡ ನಂತರ, ವೈಫಲ್ಯ ವಿಧಾನಗಳು ಯಾದೃಚ್ಛಿಕ ಭಾವನೆಯನ್ನು ನಿಲ್ಲಿಸುತ್ತವೆ. ವಾಸ್ತವವಾಗಿ, ಅವರು ಊಹಿಸಬಹುದಾದ ಆಗುತ್ತಾರೆ. ಮೂರು ವಿಷಯಗಳು ವಾಸ್ತವವಾಗಿ ಇದಕ್ಕೆ ಕಾರಣವಾಗುತ್ತವೆ ಆ ಪ್ರತಿಯೊಂದು ಐಟಂಗಳನ್ನು ವಿವರವಾಗಿ ನೋಡೋಣ. ಓವರ್ಫ್ಲೋ ಸಮಸ್ಯೆ ನೀವು ಓವರ್ಫ್ಲೋ: ಹಿಡನ್, ಓವರ್ಫ್ಲೋ: ಸ್ಕ್ರಾಲ್, ಅಥವಾ ಓವರ್ಫ್ಲೋ: ಎಲಿಮೆಂಟ್ನಲ್ಲಿ ಸ್ವಯಂ ಅನ್ನು ಹೊಂದಿಸಿದಾಗ, ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಾನದಲ್ಲಿರುವ ವಂಶಸ್ಥರು ಸೇರಿದಂತೆ ಅದರ ಮಿತಿಯನ್ನು ಮೀರಿ ವಿಸ್ತರಿಸುವ ಯಾವುದನ್ನಾದರೂ ಬ್ರೌಸರ್ ಕ್ಲಿಪ್ ಮಾಡುತ್ತದೆ. .ಸ್ಕ್ರೋಲ್ ಕಂಟೈನರ್ { ಉಕ್ಕಿ: ಸ್ವಯಂ; ಎತ್ತರ: 300px; /* ಇದು ಡ್ರಾಪ್ಡೌನ್ ಅನ್ನು ಕ್ಲಿಪ್ ಮಾಡುತ್ತದೆ, ಪೂರ್ಣ ವಿರಾಮ */ }
.ಡ್ರಾಪ್ಡೌನ್ { ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; /* ಪರವಾಗಿಲ್ಲ -- ಇನ್ನೂ .scroll-container ಮೂಲಕ ಕ್ಲಿಪ್ ಮಾಡಲಾಗಿದೆ */ }
ನಾನು ಮೊದಲ ಬಾರಿಗೆ ಓಡಿದಾಗ ಅದು ನನಗೆ ಆಶ್ಚರ್ಯವಾಯಿತು. ನಾನು ಸ್ಥಾನವನ್ನು ಊಹಿಸಿದ್ದೇನೆ: ಸಂಪೂರ್ಣ ಅಂಶವು ಕಂಟೇನರ್ನ ಕ್ಲಿಪ್ಪಿಂಗ್ನಿಂದ ತಪ್ಪಿಸಿಕೊಳ್ಳಲು ಅವಕಾಶ ನೀಡುತ್ತದೆ. ಇದು ಮಾಡುವುದಿಲ್ಲ. ಪ್ರಾಯೋಗಿಕವಾಗಿ, ಅಂದರೆ, ಗೋಚರವಾಗದ ಓವರ್ಫ್ಲೋ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿರುವ ಯಾವುದೇ ಪೂರ್ವಜರಿಂದ ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಾನದಲ್ಲಿರುವ ಮೆನುವನ್ನು ಕತ್ತರಿಸಬಹುದು, ಆ ಪೂರ್ವಜರು ಮೆನು ಒಳಗೊಂಡಿರುವ ಬ್ಲಾಕ್ ಅಲ್ಲದಿದ್ದರೂ ಸಹ. ಕ್ಲಿಪಿಂಗ್ ಮತ್ತು ಸ್ಥಾನೀಕರಣವು ಪ್ರತ್ಯೇಕ ವ್ಯವಸ್ಥೆಗಳಾಗಿವೆ. ನೀವು ಎರಡನ್ನೂ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವವರೆಗೆ ಅವು ಸಂಪೂರ್ಣವಾಗಿ ಯಾದೃಚ್ಛಿಕವಾಗಿ ಕಾಣುವ ರೀತಿಯಲ್ಲಿ ಘರ್ಷಣೆಯಾಗುತ್ತವೆ.
ಕ್ರಿಯೇಟ್ ಪೋರ್ಟಲ್ ಅನ್ನು ಬಳಸುವ ಪ್ರತಿಕ್ರಿಯೆಯ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
'react-dom' ನಿಂದ { createPortal } ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಿ; 'ರಿಯಾಕ್ಟ್' ನಿಂದ {useState, useEffect, useRef} ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಿ;
ಫಂಕ್ಷನ್ ಡ್ರಾಪ್ಡೌನ್({ anchorRef, isOpen, ಮಕ್ಕಳು }) { const [ಸ್ಥಾನ, ಸೆಟ್ ಪೊಸಿಷನ್] = ಯೂಸ್ ಸ್ಟೇಟ್ ({ಮೇಲ್ಭಾಗ: 0, ಎಡ: 0});
useEffect(() => { ವೇಳೆ (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); ಸೆಟ್ ಪೊಸಿಷನ್({ ಮೇಲ್ಭಾಗ: rect.bottom + window.scrollY, ಎಡ: rect.left + window.scrollX, }); } }, [isOpen, anchorRef]);
ಒಂದು ವೇಳೆ (!ಇಸ್ ಓಪನ್) ಶೂನ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ;
ರಿಟರ್ನ್ ಕ್ರಿಯೇಟ್ ಪೋರ್ಟಲ್(
ಮತ್ತು, ಸಹಜವಾಗಿ, ನಾವು ಪ್ರವೇಶವನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುವುದಿಲ್ಲ. ವಿಷಯದ ಮೇಲೆ ಗೋಚರಿಸುವ ಸ್ಥಿರ ಅಂಶಗಳು ಇನ್ನೂ ಕೀಬೋರ್ಡ್-ತಲುಪುವಂತಿರಬೇಕು. ಫೋಕಸ್ ಆರ್ಡರ್ ಸ್ವಾಭಾವಿಕವಾಗಿ ಸ್ಥಿರ ಡ್ರಾಪ್ಡೌನ್ಗೆ ಚಲಿಸದಿದ್ದರೆ, ನೀವು ಕೋಡ್ ಬಳಸಿ ಅದನ್ನು ನಿರ್ವಹಿಸಬೇಕಾಗುತ್ತದೆ. ಇದು ಇತರ ಸಂವಾದಾತ್ಮಕ ವಿಷಯವನ್ನು ವಜಾಗೊಳಿಸಲು ಯಾವುದೇ ರೀತಿಯಲ್ಲಿ ಕುಳಿತುಕೊಳ್ಳುವುದಿಲ್ಲ ಎಂದು ಪರಿಶೀಲಿಸುವುದು ಯೋಗ್ಯವಾಗಿದೆ. ಅದು ಕೀಬೋರ್ಡ್ ಪರೀಕ್ಷೆಯಲ್ಲಿ ನಿಮ್ಮನ್ನು ಕಚ್ಚುತ್ತದೆ. CSS ಆಂಕರ್ ಸ್ಥಾನೀಕರಣ: ಇದು ಎಲ್ಲಿಗೆ ಹೋಗುತ್ತಿದೆ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ CSS ಆಂಕರ್ ಸ್ಥಾನೀಕರಣವು ನಾನು ಇದೀಗ ಹೆಚ್ಚು ಆಸಕ್ತಿ ಹೊಂದಿರುವ ನಿರ್ದೇಶನವಾಗಿದೆ. ನಾನು ಮೊದಲು ನೋಡಿದಾಗ ಎಷ್ಟು ಸ್ಪೆಕ್ ಅನ್ನು ನಿಜವಾಗಿ ಬಳಸಬಹುದೆಂದು ನನಗೆ ಖಚಿತವಾಗಿರಲಿಲ್ಲ. ಡ್ರಾಪ್ಡೌನ್ ಮತ್ತು ಅದರ ಪ್ರಚೋದಕಗಳ ನಡುವಿನ ಸಂಬಂಧವನ್ನು ನೇರವಾಗಿ CSS ನಲ್ಲಿ ಘೋಷಿಸಲು ಇದು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ ಮತ್ತು ಬ್ರೌಸರ್ ನಿರ್ದೇಶಾಂಕಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. .ಟ್ರಿಗರ್ { ಆಂಕರ್-ಹೆಸರು: --ಮೈ-ಟ್ರಿಗ್ಗರ್; }
.dropdown-menu { ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಸ್ಥಾನ-ಆಂಕರ್: --ಮೈ-ಟ್ರಿಗ್ಗರ್; ಮೇಲ್ಭಾಗ: ಆಧಾರ (ಕೆಳಗೆ); ಎಡ: ಆಧಾರ (ಎಡ); ಸ್ಥಾನ-ಪ್ರಯತ್ನ-ಫಾಲ್ಬ್ಯಾಕ್ಗಳು: ಫ್ಲಿಪ್-ಬ್ಲಾಕ್, ಫ್ಲಿಪ್-ಇನ್ಲೈನ್; }
ಸ್ಥಾನ-ಪ್ರಯತ್ನ-ಫಾಲ್ಬ್ಯಾಕ್ಗಳ ಪ್ರಾಪರ್ಟಿಯು ಹಸ್ತಚಾಲಿತ ಲೆಕ್ಕಾಚಾರದ ಮೂಲಕ ಇದನ್ನು ಬಳಸುವುದು ಯೋಗ್ಯವಾಗಿದೆ. ಬ್ರೌಸರ್ ಬಿಟ್ಟುಕೊಡುವ ಮೊದಲು ಪರ್ಯಾಯ ನಿಯೋಜನೆಗಳನ್ನು ಪ್ರಯತ್ನಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ವ್ಯೂಪೋರ್ಟ್ನ ಕೆಳಭಾಗದಲ್ಲಿರುವ ಡ್ರಾಪ್ಡೌನ್ ಕಡಿತಗೊಳ್ಳುವ ಬದಲು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮೇಲಕ್ಕೆ ತಿರುಗುತ್ತದೆ. Chromium-ಆಧಾರಿತ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಘನವಾಗಿದೆ ಮತ್ತು Safari ನಲ್ಲಿ ಬೆಳೆಯುತ್ತಿದೆ. ಫೈರ್ಫಾಕ್ಸ್ಗೆ ಪಾಲಿಫಿಲ್ ಅಗತ್ಯವಿದೆ. @oddbird/css-anchor-positioning ಪ್ಯಾಕೇಜ್ ಕೋರ್ ಸ್ಪೆಕ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ. ನಾನು ನಿರೀಕ್ಷಿಸದಿರುವ ಫಾಲ್ಬ್ಯಾಕ್ಗಳ ಅಗತ್ಯವಿರುವ ಲೇಔಟ್ ಎಡ್ಜ್ ಕೇಸ್ಗಳನ್ನು ನಾನು ಹೊಡೆದಿದ್ದೇನೆ, ಆದ್ದರಿಂದ ಇದನ್ನು ಪ್ರಗತಿಪರ ವರ್ಧನೆಯಂತೆ ಪರಿಗಣಿಸಿ ಅಥವಾ ಅದನ್ನು ಜೋಡಿಸಿಫೈರ್ಫಾಕ್ಸ್ಗಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫಾಲ್ಬ್ಯಾಕ್. ಸಂಕ್ಷಿಪ್ತವಾಗಿ, ಭರವಸೆ ಆದರೆ ಇನ್ನೂ ಸಾರ್ವತ್ರಿಕವಾಗಿಲ್ಲ. ನಿಮ್ಮ ಗುರಿ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ. ಮತ್ತು ಪ್ರವೇಶಿಸುವಿಕೆಗೆ ಸಂಬಂಧಿಸಿದಂತೆ, CSS ನಲ್ಲಿ ದೃಶ್ಯ ಸಂಬಂಧವನ್ನು ಘೋಷಿಸುವುದು ಪ್ರವೇಶಿಸುವಿಕೆ ಮರಕ್ಕೆ ಏನನ್ನೂ ಹೇಳುವುದಿಲ್ಲ. ಏರಿಯಾ-ನಿಯಂತ್ರಣಗಳು, ಏರಿಯಾ-ವಿಸ್ತರಿತ, ಏರಿಯಾ-ಹಾಸ್ಪೋಪ್ಅಪ್ - ಆ ಭಾಗವು ಇನ್ನೂ ನಿಮ್ಮ ಮೇಲಿದೆ. ಕೆಲವೊಮ್ಮೆ ಫಿಕ್ಸ್ ಕೇವಲ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಚಲಿಸುತ್ತದೆ ಪೋರ್ಟಲ್ಗೆ ತಲುಪುವ ಮೊದಲು ಅಥವಾ ನಿರ್ದೇಶಾಂಕ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಮಾಡುವ ಮೊದಲು, ನಾನು ಯಾವಾಗಲೂ ಮೊದಲು ಒಂದು ಪ್ರಶ್ನೆಯನ್ನು ಕೇಳುತ್ತೇನೆ: ಈ ಡ್ರಾಪ್ಡೌನ್ ನಿಜವಾಗಿಯೂ ಸ್ಕ್ರಾಲ್ ಕಂಟೇನರ್ನಲ್ಲಿ ವಾಸಿಸುವ ಅಗತ್ಯವಿದೆಯೇ? ಅದು ಮಾಡದಿದ್ದರೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಯಾವುದೇ ನಿರ್ದೇಶಾಂಕ ಲೆಕ್ಕಾಚಾರಗಳಿಲ್ಲದೆ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಉನ್ನತ-ಮಟ್ಟದ ಹೊದಿಕೆಗೆ ಸರಿಸುವುದರಿಂದ ಸಮಸ್ಯೆಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ನಿವಾರಿಸುತ್ತದೆ. ಇದು ಯಾವಾಗಲೂ ಸಾಧ್ಯವಿಲ್ಲ. ಬಟನ್ ಮತ್ತು ಡ್ರಾಪ್ಡೌನ್ ಒಂದೇ ಘಟಕದಲ್ಲಿ ಆವರಿಸಿದ್ದರೆ, ಒಂದನ್ನು ಇನ್ನೊಂದಿಲ್ಲದೆ ಚಲಿಸುವುದು ಎಂದರೆ ಸಂಪೂರ್ಣ API ಅನ್ನು ಮರುಚಿಂತನೆ ಮಾಡುವುದು. ಆದರೆ ನೀವು ಅದನ್ನು ಮಾಡಿದಾಗ, ಡೀಬಗ್ ಮಾಡಲು ಏನೂ ಇಲ್ಲ. ಸಮಸ್ಯೆ ಕೇವಲ ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲ. ಆಧುನಿಕ CSS ಇನ್ನೂ ಏನು ಪರಿಹರಿಸುವುದಿಲ್ಲ CSS ಇಲ್ಲಿ ಬಹಳ ದೂರ ಸಾಗಿದೆ, ಆದರೆ ಇದು ನಿಮ್ಮನ್ನು ನಿರಾಸೆಗೊಳಿಸುವ ಸ್ಥಳಗಳು ಇನ್ನೂ ಇವೆ. ಸ್ಥಾನ: ಸ್ಥಿರ ಮತ್ತು ರೂಪಾಂತರ ಸಮಸ್ಯೆಗಳು ಇನ್ನೂ ಇವೆ. ಇದು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಸ್ಪೆಕ್ನಲ್ಲಿದೆ, ಇದರರ್ಥ ಯಾವುದೇ CSS ಪರಿಹಾರವು ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲ. ರೂಪಾಂತರಗೊಂಡ ಅಂಶದಲ್ಲಿ ನಿಮ್ಮ ವಿನ್ಯಾಸವನ್ನು ಸುತ್ತುವ ಅನಿಮೇಷನ್ ಲೈಬ್ರರಿಯನ್ನು ನೀವು ಬಳಸುತ್ತಿದ್ದರೆ, ನೀವು ಪೋರ್ಟಲ್ಗಳು ಅಥವಾ ಆಂಕರ್ ಸ್ಥಾನೀಕರಣದ ಅಗತ್ಯಕ್ಕೆ ಹಿಂತಿರುಗುತ್ತೀರಿ. CSS ಆಂಕರ್ ಸ್ಥಾನೀಕರಣವು ಭರವಸೆಯಿದೆ, ಆದರೆ ಹೊಸದು. ಮೊದಲೇ ಹೇಳಿದಂತೆ, ನಾನು ಇದನ್ನು ಬರೆಯುವ ಸಮಯದಲ್ಲಿ ಫೈರ್ಫಾಕ್ಸ್ಗೆ ಇನ್ನೂ ಪಾಲಿಫಿಲ್ ಅಗತ್ಯವಿದೆ. ನಾನು ನಿರೀಕ್ಷಿಸಿರದ ಫಾಲ್ಬ್ಯಾಕ್ಗಳ ಅಗತ್ಯವಿರುವ ಲೇಔಟ್ ಅಂಚಿನ ಪ್ರಕರಣಗಳನ್ನು ನಾನು ಹೊಡೆದಿದ್ದೇನೆ. ಇಂದು ಎಲ್ಲಾ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ನಿಮಗೆ ಸ್ಥಿರವಾದ ನಡವಳಿಕೆಯ ಅಗತ್ಯವಿದ್ದರೆ, ನೀವು ಇನ್ನೂ ಟ್ರಿಕಿ ಭಾಗಗಳಿಗಾಗಿ JavaScript ಅನ್ನು ತಲುಪುತ್ತಿರುವಿರಿ. HTML Popover API ಗಾಗಿ ನಾನು ನನ್ನ ವರ್ಕ್ಫ್ಲೋ ಅನ್ನು ಬದಲಾಯಿಸಿದ್ದೇನೆ, ಈಗ ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಲಭ್ಯವಿದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸ್ಥಾನೀಕರಣದ ಅಗತ್ಯವಿಲ್ಲದೆ, ಎಲ್ಲಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ, ಬ್ರೌಸರ್ನ ಮೇಲಿನ ಪದರದಲ್ಲಿ ಪಾಪ್ಓವರ್ ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿರುವ ಅಂಶಗಳು ನಿರೂಪಿಸುತ್ತವೆ.
ಟೂಲ್ಟಿಪ್ಗಳು, ಬಹಿರಂಗಪಡಿಸುವಿಕೆಯ ವಿಜೆಟ್ಗಳು ಮತ್ತು ಸರಳ ಓವರ್ಲೇಗಳಂತಹ ವಿಷಯಗಳಿಗೆ ಎಸ್ಕೇಪ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್, ಡಿಸ್ಮಿಸ್-ಆನ್-ಕ್ಲಿಕ್-ಹೊರಗೆ ಮತ್ತು ಘನ ಪ್ರವೇಶಿಸುವಿಕೆ ಸೆಮ್ಯಾಂಟಿಕ್ಸ್ ಉಚಿತವಾಗಿ ಬರುತ್ತದೆ. ಇದು ನಾನು ಈಗ ತಲುಪುವ ಮೊದಲ ಸಾಧನವಾಗಿದೆ. ಅದು ಸ್ಥಾನೀಕರಣವನ್ನು ಪರಿಹರಿಸುವುದಿಲ್ಲ ಎಂದು ಹೇಳಿದರು. ಇದು ಲೇಯರಿಂಗ್ ಅನ್ನು ಪರಿಹರಿಸುತ್ತದೆ. ಪಾಪೋವರ್ ಅನ್ನು ಅದರ ಪ್ರಚೋದಕಕ್ಕೆ ಜೋಡಿಸಲು ನಿಮಗೆ ಇನ್ನೂ ಆಂಕರ್ ಸ್ಥಾನೀಕರಣ ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯವಿದೆ. Popover API ಲೇಯರಿಂಗ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಆಂಕರ್ ಸ್ಥಾನೀಕರಣವು ನಿಯೋಜನೆಯನ್ನು ನಿಭಾಯಿಸುತ್ತದೆ. ಒಟ್ಟಿಗೆ ಬಳಸಿದರೆ, ಲೈಬ್ರರಿಗಾಗಿ ನೀವು ಈ ಹಿಂದೆ ಏನನ್ನು ಮಾಡಲು ಬಯಸುತ್ತೀರೋ ಅವುಗಳು ಹೆಚ್ಚಿನದನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ. ನಿಮ್ಮ ಪರಿಸ್ಥಿತಿಗಾಗಿ ನಿರ್ಧಾರ ಮಾರ್ಗದರ್ಶಿ ಇದೆಲ್ಲವನ್ನೂ ಕಠಿಣ ರೀತಿಯಲ್ಲಿ ಹಾದುಹೋದ ನಂತರ, ನಾನು ಈಗ ಆಯ್ಕೆಯ ಬಗ್ಗೆ ಹೇಗೆ ಯೋಚಿಸುತ್ತೇನೆ ಎಂಬುದು ಇಲ್ಲಿದೆ.
ಪೋರ್ಟಲ್ ಅನ್ನು ಬಳಸಿ. ನೆಸ್ಟೆಡ್ ಸ್ಕ್ರಾಲ್ ಕಂಟೈನರ್ಗಳಲ್ಲಿ ಟ್ರಿಗ್ಗರ್ ಆಳವಾಗಿ ಇರುವಾಗ ನಾನು ಇದನ್ನು ಬಳಸುತ್ತೇನೆ. ನಾನು ಟೇಬಲ್ ಆಕ್ಷನ್ ಮೆನುಗಳಿಗಾಗಿ ಈ ಮಾದರಿಯನ್ನು ಬಳಸಿದ್ದೇನೆ ಮತ್ತು ಅದನ್ನು ಫೋಕಸ್ ಮರುಸ್ಥಾಪನೆ ಮತ್ತು ಪ್ರವೇಶಿಸುವಿಕೆ ಪರಿಶೀಲನೆಗಳೊಂದಿಗೆ ಜೋಡಿಸಿದ್ದೇನೆ. ಇದು ಅತ್ಯಂತ ವಿಶ್ವಾಸಾರ್ಹ ಆಯ್ಕೆಯಾಗಿದೆ, ಆದರೆ ಹೆಚ್ಚುವರಿ ವೈರಿಂಗ್ಗಾಗಿ ಬಜೆಟ್ ಸಮಯ. ಸ್ಥಿರ ಸ್ಥಾನವನ್ನು ಬಳಸಿ. ನೀವು ವೆನಿಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಥವಾ ಹಗುರವಾದ ಚೌಕಟ್ಟಿನಲ್ಲಿರುವಾಗ ಮತ್ತು ಯಾವುದೇ ಪೂರ್ವಜರು ರೂಪಾಂತರಗಳು ಅಥವಾ ಫಿಲ್ಟರ್ಗಳನ್ನು ಅನ್ವಯಿಸುವುದಿಲ್ಲ ಎಂದು ಪರಿಶೀಲಿಸಬಹುದು. ಇದು ಹೊಂದಿಸಲು ಸರಳವಾಗಿದೆ ಮತ್ತು ಡೀಬಗ್ ಮಾಡಲು ಸರಳವಾಗಿದೆ, ಆ ಒಂದು ನಿರ್ಬಂಧವನ್ನು ಹೊಂದಿರುವವರೆಗೆ. CSS Anchor Positioning ಅನ್ನು ಬಳಸಿ.ನಿಮ್ಮ ಬ್ರೌಸರ್ ಬೆಂಬಲ ಇದನ್ನು ಅನುಮತಿಸಿದಾಗ ಇದನ್ನು ತಲುಪಿ. Firefox ಬೆಂಬಲದ ಅಗತ್ಯವಿದ್ದರೆ, @oddbird polyfill ಜೊತೆಗೆ ಅದನ್ನು ಜೋಡಿಸಿ. ಇಲ್ಲಿಯೇ ಪ್ಲಾಟ್ಫಾರ್ಮ್ ಅಂತಿಮವಾಗಿ ಹೋಗುತ್ತಿದೆ ಮತ್ತು ಅಂತಿಮವಾಗಿ ನಿಮ್ಮ ಗೋ-ಟು ವಿಧಾನವಾಗಿ ಪರಿಣಮಿಸುತ್ತದೆ. DOM ಅನ್ನು ಪುನರ್ರಚಿಸಿ.ಆರ್ಕಿಟೆಕ್ಚರ್ ಇದನ್ನು ಅನುಮತಿಸಿದಾಗ ಇದನ್ನು ಬಳಸಿ ಮತ್ತು ನೀವು ಶೂನ್ಯ ರನ್ಟೈಮ್ ಸಂಕೀರ್ಣತೆಯನ್ನು ಬಯಸುತ್ತೀರಿ. ಇದು ಅತ್ಯಂತ ಕಡಿಮೆ ದರದ ಆಯ್ಕೆಯಾಗಿದೆ ಎಂದು ನಾನು ನಂಬುತ್ತೇನೆ. ಪ್ಯಾಟರ್ನ್ಗಳನ್ನು ಸಂಯೋಜಿಸಿ. ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್ಗಳಿಗಾಗಿ JavaScript ಫಾಲ್ಬ್ಯಾಕ್ನೊಂದಿಗೆ ಜೋಡಿಸಲಾದ ನಿಮ್ಮ ಪ್ರಾಥಮಿಕ ವಿಧಾನವಾಗಿ ಆಂಕರ್ ಸ್ಥಾನೀಕರಣವನ್ನು ನೀವು ಬಯಸಿದಾಗ ಇದನ್ನು ಮಾಡಿ. ಅಥವಾ ನಿರ್ದೇಶಾಂಕ ನಿಖರತೆಗಾಗಿ getBoundingClientRect() ನೊಂದಿಗೆ DOM ನಿಯೋಜನೆಗಾಗಿ ಪೋರ್ಟಲ್ ಅನ್ನು ಜೋಡಿಸಲಾಗಿದೆ.
ತೀರ್ಮಾನ ನಾನು ಈ ದೋಷವನ್ನು ಒಂದು-ಆಫ್ ಸಮಸ್ಯೆಯಾಗಿ ಪರಿಗಣಿಸುತ್ತಿದ್ದೆ - ಪ್ಯಾಚ್ ಮಾಡಲು ಮತ್ತು ಮುಂದುವರಿಯಲು ಏನಾದರೂ. ಆದರೆ ಒಮ್ಮೆ ನಾನು ಒಳಗೊಂಡಿರುವ ಎಲ್ಲಾ ಮೂರು ವ್ಯವಸ್ಥೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸಾಕಷ್ಟು ಸಮಯ ಕುಳಿತುಕೊಂಡಿದ್ದೇನೆ - ಓವರ್ಫ್ಲೋ ಕ್ಲಿಪ್ಪಿಂಗ್, ಸ್ಟ್ಯಾಕಿಂಗ್ ಸನ್ನಿವೇಶಗಳು ಮತ್ತು ಬ್ಲಾಕ್ಗಳನ್ನು ಹೊಂದಿರುವ - ಅದು ಯಾದೃಚ್ಛಿಕ ಭಾವನೆಯನ್ನು ನಿಲ್ಲಿಸಿತು. ನಾನು ಮುರಿದ ಡ್ರಾಪ್ಡೌನ್ ಅನ್ನು ನೋಡಬಲ್ಲೆ ಮತ್ತು ಯಾವ ಪೂರ್ವಜನು ಜವಾಬ್ದಾರನೆಂದು ತಕ್ಷಣವೇ ಪತ್ತೆಹಚ್ಚಬಲ್ಲೆ. ನಾನು DOM ಅನ್ನು ಹೇಗೆ ಓದುತ್ತೇನೆ ಎಂಬುದರಲ್ಲಿ ಆ ಬದಲಾವಣೆಯು ನಿಜವಾದ ಟೇಕ್ಅವೇ ಆಗಿತ್ತು. ಒಂದೇ ಸರಿಯಾದ ಉತ್ತರವಿಲ್ಲ. ನಾನು ಕೋಡ್ಬೇಸ್ನಲ್ಲಿ ಏನನ್ನು ನಿಯಂತ್ರಿಸಬಹುದೆಂಬುದನ್ನು ಅವಲಂಬಿಸಿದೆ: ಪೂರ್ವಜರ ಮರವು ಅನಿರೀಕ್ಷಿತವಾಗಿದ್ದಾಗ ಪೋರ್ಟಲ್ಗಳು; ಇದು ಶುದ್ಧ ಮತ್ತು ಸರಳವಾದಾಗ ಸ್ಥಿರ ಸ್ಥಾನೀಕರಣ; ಯಾವುದೂ ನನ್ನನ್ನು ತಡೆಯದಿದ್ದಾಗ ಅಂಶವನ್ನು ಚಲಿಸುವುದು; ಮತ್ತು ಆಂಕರ್ ಸ್ಥಾನೀಕರಣ ಈಗ,ನಾನು ಎಲ್ಲಿ ಮಾಡಬಹುದು. ನೀವು ಯಾವುದನ್ನು ಆರಿಸಿಕೊಂಡರೂ, ಪ್ರವೇಶವನ್ನು ಕೊನೆಯ ಹಂತವಾಗಿ ಪರಿಗಣಿಸಬೇಡಿ. ನನ್ನ ಅನುಭವದಲ್ಲಿ, ಅದು ನಿಖರವಾಗಿ ಬಿಟ್ಟುಬಿಡುತ್ತದೆ. ARIA ಸಂಬಂಧಗಳು, ಫೋಕಸ್ ಮ್ಯಾನೇಜ್ಮೆಂಟ್, ಕೀಬೋರ್ಡ್ ನಡವಳಿಕೆ - ಅವು ಪೋಲಿಷ್ ಅಲ್ಲ. ಅವರು ವಾಸ್ತವವಾಗಿ ಕೆಲಸ ಮಾಡುವ ಭಾಗವಾಗಿದೆ. ನನ್ನ GitHub ರೆಪೋದಲ್ಲಿ ಸಂಪೂರ್ಣ ಮೂಲ ಕೋಡ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ. ಹೆಚ್ಚಿನ ಓದುವಿಕೆ ಇದರ ಮೂಲಕ ಕೆಲಸ ಮಾಡುವಾಗ ನಾನು ಮತ್ತೆ ಬರುತ್ತಿರುವ ಉಲ್ಲೇಖಗಳು ಇವು:
ಸ್ಟ್ಯಾಕಿಂಗ್ ಸಂದರ್ಭ (MDN) "CSS ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್ ಗೈಡ್", ಜುವಾನ್ ಡಿಯಾಗೋ ರೊಡ್ರಿಗಸ್ "ಪೋಪೋವರ್ API ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸುವುದು", ಗಾಡ್ಟೈಮ್ ಅಬುರು ತೇಲುವ UI (floating-ui.com) CSS ಓವರ್ಫ್ಲೋ (MDN)
