דער סצענאַר איז כּמעט שטענדיק דער זעלביקער, וואָס איז אַ דאַטן טיש אין אַ סקראָלאַבלע קאַנטיינער. יעדער רודערן האט אַן קאַמף מעניו, אַ קליין דראָפּדאָוון מיט עטלעכע אָפּציעס, ווי רעדאַגירן, דופּליקאַט און ויסמעקן. איר בויען עס, עס מיינט צו אַרבעטן בישליימעס אין אפגעזונדערטקייט, און דעמאָלט עמעצער לייגט עס אין די סקראָלאַבלע דייוו און די זאכן פאַלן באַזונדער. איך האָב געזען דעם פּינטלעך זשוק אין דריי פאַרשידענע קאָדעבאַסעס: די קאַנטיינער, די אָנלייגן און די פריימווערק, אַלע אַנדערש. דער זשוק, אָבער, איז טאָוטאַלי יידעניקאַל.
די דראָפּדאָוון איז קליפּט בייַ די ברעג פון דעם קאַנטיינער. אָדער עס ווייזט זיך הינטער אינהאַלט וואָס זאָל לאַדזשיקלי זיין אונטער אים. אָדער עס אַרבעט פייַן ביז דער באַניצער סקראָללס, און דעמאָלט עס דריפץ.
איר דערגרייכן פֿאַר ז-אינדעקס: 9999. מאל עס העלפט, אָבער אנדערע מאל עס טוט גאָרנישט גאָרנישט. אַז ינקאַנסיסטאַנסי איז דער ערשטער קלו אַז עפּעס דיפּער איז געשעעניש.
די סיבה עס האלט צו קומען צוריק איז אַז דריי באַזונדער בלעטערער סיסטעמען זענען ינוואַלווד, און רובֿ דעוועלאָפּערס פֿאַרשטיין יעדער איינער אויף זיך, אָבער קיינמאָל טראַכטן וועגן וואָס כאַפּאַנז ווען אַלע דריי קאַלייד: אָוווערפלאָו, סטאַקינג קאַנטעקסץ און מיט בלאַקס.
אַמאָל איר פֿאַרשטיין ווי אַלע דריי ינטעראַקט, די דורכפאַל מאָדעס האַלטן צו פילן טראַפ. אין פאַקט, זיי ווערן פּרידיקטאַבאַל.
די דריי טינגז אַקטשאַוואַלי קאָזינג דעם
זאל ס קוק אין יעדער פון די זאכן אין דעטאַל.
די אָוווערפלאָו פּראָבלעם
ווען איר שטעלן אָוווערפלאָו: פאַרבאָרגן, אָוווערפלאָו: מעגילע, אָדער אָוווערפלאָו: אַוטאָ אויף אַן עלעמענט, דער בלעטערער וועט קלעמערל אַלץ וואָס יקסטענדז ווייַטער פון זיין גרענעץ, אַרייַנגערעכנט לעגאַמרע פּאַזישאַנד קינדסקינדער.
.סקראָל-קאָנטאַינער {
אָוווערפלאָו: אַוטאָ;
הייך: 300פּקס;
/* דאָס וועט קלעמערל די דראָפּדאָוון, פול האַלטן */
}
.דראָפּדאָוון {
שטעלע: אַבסאָלוט;
/* טוט נישט ענין - נאָך קליפּט דורך .סקראָל-קאָנטאַינער */
}
אַז סאַפּרייזד מיר די ערשטער מאָל איך געלאפן אין עס. איך'ד אנגענומען שטעלע: אַבסאָלוט וואָלט לאָזן אַן עלעמענט אַנטלויפן פון אַ קאַנטיינער ס קליפּינג. עס טוט נישט.
אין פיר, דאָס מיטל אַז אַ לעגאַמרע פּאַזישאַנד מעניו קענען זיין שנייַדן אַוועק דורך קיין אָוועס וואָס האט אַ ניט-קענטיק אָוווערפלאָו ווערט, אפילו אויב דער אָוועס איז נישט די בלאָק פון די מעניו. קליפּינג און פּאַזישאַנינג זענען באַזונדער סיסטעמען. זיי נאָר פּאַסירן צו קאַלייד אין וועגן וואָס קוק גאָר טראַפ ביז איר פֿאַרשטיין ביידע.
דאָ איז אַ רעאַקט ביישפּיל ניצן createPortal:
אַרייַנפיר {createPortal} פֿון 'react-dom';
אַרייַנפיר {useState, useEffect, useRef} פֿון 'רעאַגירן';
פונקציע דראָפּדאָוון ({ anchorRef, isOpen, קינדער }) {
const [פּאָזיציע, סעטפּאָסיטיאָן] = useState ({שפּיץ: 0, לינקס: 0});
useEffect (() => {
אויב (איז עפֿן && anchorRef.current) {
const rect = anchorRef.current.getBoundingClientRect();
setPosition({
שפּיץ: rect.bottom + windows.scrollY,
לינקס: rect.left + windows.scrollX,
});
}
}, [יסאָפּען, anchorRef]);
אויב (!יסאָפּען) צוריקקומען נאַל;
צוריקקומען שאַפֿןפּאָרטאַל (
<דייוו
id = "דראָפּדאָוון-דעמאָ"
role="menu"
className = "דראָפּדאָוון מעניו"
סטיל = {{ שטעלע: 'אַבסאָלוט', שפּיץ: שטעלע.טאָפּ, לינקס: שטעלע.לעפט }}
>
{קינדער}
,
document.body
);
}
און, פון קורס, מיר קענען נישט איגנאָרירן אַקסעסאַביליטי. פאַרפעסטיקט עלעמענטן וואָס דערשייַנען איבער אינהאַלט מוזן נאָך זיין ריטשאַבאַל קלאַוויאַטור. אויב די פאָקוס סדר איז נישט געוויינטלעך מאַך אין די פאַרפעסטיקט דראָפּדאָוון, איר דאַרפֿן צו פירן עס מיט קאָד. עס איז אויך ווערט צו קאָנטראָלירן אַז עס איז נישט אויף אנדערע ינטעראַקטיוו אינהאַלט מיט קיין וועג צו אָפּזאָגן עס. אַז איינער ביטעס איר אין קלאַוויאַטור טעסטינג.
CSS אַנקער פּאַזישאַנינג: ווו איך טראַכטן דאָס איז כעדינג
CSS אַנקער פּאַזישאַנינג איז דער ריכטונג איך בין מערסט אינטערעסירט אין רעכט איצט. איך איז געווען ניט זיכער ווי פיל פון די ספּעק איז פאקטיש ניצלעך ווען איך ערשטער געקוקט אויף עס. עס לעץ איר דערקלערן די שייכות צווישן אַ דראָפּדאָוון און זיין צינגל גלייַך אין CSS, און דער בלעטערער כאַנדאַלז די קאָואָרדאַנאַץ.
.trigger {
אַנקער-נאָמען: --מיין-צינגל;
}
.דראָפּדאָוון-מעניו {
שטעלע: אַבסאָלוט;
שטעלע-אַנקער: --מיין-צינגל;
שפּיץ: אַנקער (דנאָ);
לינקס: אַנקער (לינקס);
שטעלע-פּרובירן-פאַלבאַקקס: פליפּ-בלאָק, פליפּ-ינלינע;
}
די פּאָזיציע-פּרובירן-פאַלבאַקקס פאַרמאָג איז וואָס מאכט דעם ווערט ניצן איבער אַ מאַנואַל כעזשבן. דער בלעטערער פרוווט אַלטערנאַטיווע פּלייסמאַנץ איידער געבן אַרויף, אַזוי אַ דראָפּדאָוון אין די דנאָ פון די וויופּאָרט אויטאָמאַטיש פליפּס אַרוף אַנשטאָט פון שנייַדן אַוועק.
בראַוזער שטיצן איז האַרט אין קראָומיאַם-באזירט בראַוזערז און גראָוינג אין Safari. פירעפאָקס דאַרף אַ פּאָליפילל. די @oddbird/css-anchor-positioning פּעקל קאָווערס די האַרץ ספּעק. איך'ווע שלאָגן אויסלייג ברעג קאַסעס מיט עס וואָס פארלאנגט פאַלבאַקס איך האט נישט ריכטנ זיך, אַזוי מייַכל עס ווי אַ פּראָגרעסיוו ענכאַנסמאַנט אָדער פּאָר עס מיט אַדזשאַוואַסקריפּט פאַלבאַק פֿאַר פירעפאָקס.
אין קורץ, פּראַמאַסינג אָבער נישט וניווערסאַל נאָך. פּרובירן אין דיין ציל בראַוזערז.
און ווי ווייַט ווי אַקסעסאַביליטי איז זארגן, דיקלערינג אַ וויזשאַוואַל שייכות אין CSS טוט נישט זאָגן די אַקסעסאַביליטי בוים עפּעס. aria-controls, aria-expanded, aria-haspopup - אַז טייל איז נאָך אויף איר.
מאל די פאַרריכטן איז נאָר מאָווינג די עלעמענט
איידער איך דערגרייכן אַ טויער אָדער מאַכן קאָואָרדאַנאַט חשבונות, איך שטענדיק פרעגן איין קשיא ערשטער: טוט דעם דראָפּדאָוון טאַקע דאַרפֿן צו לעבן אין די מעגילע קאַנטיינער?
אויב דאָס איז נישט, מאַך די מאַרקאַפּ צו אַ העכער מדרגה ראַפּער ילימאַנייץ די פּראָבלעם גאָר אָן דזשאַוואַסקריפּט און קיין קאָואָרדאַנאַט חשבונות.
דאָס איז ניט שטענדיק מעגלעך. אויב די קנעפּל און דראָפּדאָוון זענען ענקאַפּסאַלייטיד אין דער זעלביקער קאָמפּאָנענט, מאָווינג איינער אָן די אנדערע מיטל ריטינגקינג די גאנצע אַפּי. אָבער ווען איר קענען טאָן דאָס, עס איז גאָרנישט צו דיבאַגינג. דער פּראָבלעם פשוט טוט נישט עקסיסטירן.
וואָס מאָדערן CSS נאָך טוט נישט סאָלווע
CSS האט קומען אַ לאַנג וועג דאָ, אָבער עס זענען נאָך ערטער וואָס עס לאָזן איר אַראָפּ.
די שטעלע: פאַרפעסטיקט און יבערמאַכן ישוז זענען נאָך דאָרט. עס איז בעקיוון אין די ספּעק, וואָס מיטל קיין CSS וואָרקאַראָונד יגזיסץ. אויב איר נוצן אַן אַנאַמיישאַן ביבליאָטעק וואָס ראַפּס דיין אויסלייג אין אַ פארוואנדלען עלעמענט, איר דאַרפֿן פּאָרטאַלס אָדער אַנקער פּאַזישאַנינג.
CSS אַנקער פּאַזישאַנינג איז פּראַמאַסינג, אָבער נייַ. ווי פריער דערמאנט, פירעפאָקס נאָך דאַרף אַ פּאָליפילל אין דער צייט ווען איך שרייב דעם. איך'ווע שלאָגן אויסלייג ברעג קאַסעס מיט אים וואָס פארלאנגט פאָלבאַקקס איך האט נישט ריכטנ זיך. אויב איר דאַרפֿן קאָנסיסטענט נאַטור אין אַלע בראַוזערז הייַנט, איר נאָך דערגרייכן דזשאַוואַסקריפּט פֿאַר די טריקי פּאַרץ.
די אַדישאַן פֿאַר וואָס איך אַקטשאַוואַלי טשיינדזשד מיין וואָרקפלאָוו איז די HTML Popover API, איצט בנימצא אין אַלע מאָדערן בראַוזערז. עלעמענטן מיט די פּאָפּאָווער אַטריביוט רענדערן אין די בלעטערער ס שפּיץ שיכטע, אויבן אַלץ, אָן דזשאַוואַסקריפּט פּאַזישאַנינג דארף.
עפֿן
פּאָפּאָווער אינהאַלט
אַנטלויפן האַנדלינג, אָפּזאָגן-אויף-גיט-אַרויס און האַרט אַקסעסאַביליטי סעמאַנטיקס זענען פריי פֿאַר טינגז ווי מכשירים ווי מכשירים, אַנטפּלעקונג ווידזשיץ און פּשוט אָוווערלייז. עס איז דער ערשטער געצייַג איך דערגרייכן פֿאַר איצט.
אַז איז, עס טוט נישט סאָלווע פּאַזישאַנינג. עס סאַלווז לייערינג. איר נאָך דאַרפֿן אַנקער פּאַזישאַנינג אָדער דזשאַוואַסקריפּט צו ייַנרייען אַ פּאָפּאָווער צו זיין צינגל. די פּאָפּאָווער אַפּי כאַנדאַלז די לייערינג. אַנקער פּאַזישאַנינג כאַנדאַלז די פּלייסמאַנט. צוזאַמען, זיי דעקן רובֿ פון וואָס איר האָט ביז אַהער דערגרייכן פֿאַר אַ ביבליאָטעק צו טאָן.
א באַשלוס גייד פֿאַר דיין סיטואַציע
נאָך דורכגיין אַלע דעם שווער וועג, דאָ ס ווי איך טאַקע טראַכטן וועגן די ברירה איצט.
ניצן אַ טויער.איך'ד נוצן דעם ווען די צינגל לעבן טיף אין נעסטעד מעגילע קאַנטיינערז. איך געוויינט דעם מוסטער פֿאַר טיש קאַמף מעניוז און פּערד עס מיט פאָקוס רעסטעריישאַן און אַקסעסאַביליטי טשעקס. דאָס איז די מערסט פאַרלאָזלעך אָפּציע, אָבער אַ בודזשעט צייט פֿאַר די עקסטרע וויירינג.
ניצן פאַרפעסטיקט פּאַזישאַנינג.דאס איז פֿאַר ווען איר זענט אין וואַניל דזשאַוואַסקריפּט אָדער אַ לייטווייט פריימווערק און קענען באַשטעטיקן קיין אָוועס אַפּלייז טראַנספאָרמז אָדער פילטערס. עס איז פּשוט צו שטעלן אַרויף און פּשוט צו דיבאַגינג, ווי לאַנג ווי אַז איין קאַנסטריינץ האלט.
ניצן CSS Anchor Positioning.Reach פֿאַר דעם ווען דיין בלעטערער שטיצן אַלאַוז עס. אויב פירעפאָקס שטיצן איז פארלאנגט, פּאָר עס מיט די @oddbird polyfill. דאָס איז ווו די פּלאַטפאָרמע לעסאָף כעדינג און וועט יווענטשאַוואַלי ווערן דיין גיין-צו צוגאַנג.
ריסטראַקטשער די DOM.Use דעם ווען די אַרקאַטעקטשער פּערמיץ עס, און איר ווילן נול רונטימע קאַמפּלעקסיטי. איך גלויבן אַז עס איז מיסטאָמע די מערסט אַנדעררייטיד אָפּציע.
קאַמביין פּאַטערנז. טאָן דאָס ווען איר ווילן אַנקער פּאַזישאַנינג ווי דיין ערשטיק צוגאַנג, פּערד מיט אַ דזשאַוואַסקריפּט פאַלבאַק פֿאַר אַנסאַפּאָרטיד בראַוזערז. אָדער אַ טויער פֿאַר DOM פּלייסמאַנט פּערד מיט getBoundingClientRect () פֿאַר קאָואָרדאַנאַט אַקיעראַסי.
מסקנא
איך געוויינט צו מייַכל דעם זשוק ווי אַ איין-אַוועק אַרויסגעבן - עפּעס צו לאַטע און מאַך אויף. אָבער אַמאָל איך געזעסן מיט אים לאַנג גענוג צו פֿאַרשטיין אַלע דריי סיסטעמען ינוואַלווד - אָוווערפלאָו קליפּינג, סטאַקינג קאַנטעקסץ און מיט בלאַקס - עס פארשטאפט געפיל טראַפ. איך קען קוקן אין אַ צעבראכן דראָפּדאָוון און מיד שפּור וואָס אָוועס איז פאַראַנטוואָרטלעך. די יבעררוק אין ווי איך לייענען די DOM איז געווען די פאַקטיש טייקאַווייַ.
עס איז קיין איין רעכט ענטפער. וואָס איך ריטשט פֿאַר דעפּענדינג אויף וואָס איך קען קאָנטראָלירן אין די קאָדעבאַסע: פּאָרטאַלס ווען די אָוועס בוים איז אַנפּרידיקטאַבאַל; פאַרפעסטיקט פּאַזישאַנינג ווען עס איז ריין און פּשוט; מאָווינג די עלעמענט ווען גאָרנישט איז סטאָפּפּינג מיר; און אַנקער פּאַזישאַנינג איצט,וואו איך קען.
וועלכער איר סוף אַרויף טשוזינג, טאָן ניט מייַכל אַקסעסאַביליטי ווי די לעצטע שריט. אין מיין דערפאַרונג, דאָס איז פּונקט ווען עס איז סקיפּט. די ARIA באציונגען, די פאָקוס פאַרוואַלטונג, די קלאַוויאַטור נאַטור - די ביסט נישט פויליש. זיי זענען טייל פון וואָס מאכט די זאַך אַקשלי אַרבעט.
קוק די פול מקור קאָד אין מיין GitHub רעפּאָ.
ווייַטער לייענען
דאָס זענען די רעפערענצן וואָס איך האָב קומען צוריק צו בשעת איך אַרבעט דורך דעם:
די סטאַקינג קאָנטעקסט (MDN)
"CSS אַנקער פּאַזישאַנינג גייד", וואַן דיעגאָ ראַדריגעז
"באַקומען סטאַרטעד מיט די פּאָפּאָווער אַפּי", Godstime Aburu
פלאָוטינג וי (floating-ui.com)
CSS אָוווערפלאָו (MDN)
